[add] copy text

website/components/common/footer.tsx

@@ -1,19 +1,24 @@
 import * as localizations from "../../localizations";
 
+import { IconChevronUp } from "@tabler/icons";
 import { useLanguage } from "contexts/language";
+import { useRef } from "react";
 
 export const Footer = () => {
     const { strings, setLanguage } = useLanguage();
     return <footer className="fixed bottom-0 flex justify-between w-full m-auto py-5 px-10">
-        <div className="space-x-8">
+        <div className="space-x-8 flex flex-row">
             <a className="opacity-40 text-black hover:opacity-70 transition" target="_blank" rel="noreferrer" href="https://github.com/Animenosekai/translate">GitHub</a>
-            <select value={strings.language} className="appearance-none bg-transparent outline-none cursor-pointer opacity-40 hover:opacity-70 transition" name="language" onChange={ev => setLanguage(ev.target.value)}>
-                {
-                    Object.keys(localizations).map((lang, key) => {
-                        return <option value={lang} key={key}>{(new localizations[lang]()).name}</option>
-                    })
-                }
-            </select>
+            <div className="flex flex-row opacity-40 hover:opacity-70 transition cursor-pointer">
+                <select value={strings.language} className="appearance-none bg-transparent outline-none pr-5 z-[1] cursor-pointer" name="language" onChange={ev => setLanguage(ev.target.value)}>
+                    {
+                        Object.keys(localizations).map((lang, key) => {
+                            return <option value={lang} key={key}>{(new localizations[lang]()).name}</option>
+                        })
+                    }
+                </select>
+                <IconChevronUp className="-ml-7" />
+            </div>
         </div>
     </footer>
 }

website/components/icons/copy.tsx

@@ -0,0 +1,5 @@
+import { IconCopy } from "@tabler/icons";
+
+export const CopyIcon = (props: any) => (
+    <IconCopy {...props} />
+);

website/components/ui/cards/mainResult.tsx

@@ -3,6 +3,7 @@ import { TransliterateRequest, TransliterateResult } from "types/transliterate";
 import { useEffect, useState } from "react";
 
 import ContentLoader from "react-content-loader";
+import { CopyIcon } from "components/icons/copy";
 import { EditIcon } from "components/icons/edit";
 import { LanguageDetailsResult } from "types/languageDetails";
 import { LanguagePicker } from "../modals/languagePicker";
@@ -43,11 +44,9 @@ export const TTSButton = ({ text, sourceLang, ...props }: { text: string, source
             setTTS(false);
         }
     }, [tts]);
-    return <div className="ml-auto" {...props}>
-        <button className="opacity-80 hover:opacity-100 transition active:scale-95" onClick={() => setTTS(true)}>
-            <TTSIcon />
-        </button>
-    </div>
+    return <button className="opacity-80 hover:opacity-100 transition active:scale-95" onClick={() => setTTS(true)}>
+        <TTSIcon />
+    </button>
 }
 
 export const MainResultLoader = (props) => {
@@ -150,7 +149,7 @@ export const MainResultCard = ({ text, language, service, loading, onNewTranslat
                 : <SourceTextArea value={currentText} onChange={el => setCurrentText(el.target.value)} />
         }
         <Card.Footer>
-            <div className="w-11/12 flex flex-row">
+            <div className="w-10/12 flex flex-row">
                 <ServiceElement service={service} />
                 {
                     transliteration && <div className="opacity-70 flex flex-row">
@@ -166,7 +165,14 @@ export const MainResultCard = ({ text, language, service, loading, onNewTranslat
                     </div>
                 }
             </div>
-            <TTSButton text={currentText} sourceLang={language} />
+            <div className="ml-auto flex flex-row space-x-2">
+                <TTSButton text={currentText} sourceLang={language} />
+                {
+                    service
+                        ? <CopyIcon onClick={() => {navigator.clipboard.writeText(currentText)}} className="opacity-80 hover:opacity-100 transition active:scale-95 cursor-pointer" />
+                        : ""
+                }
+            </div>
         </Card.Footer>
     </Card>
 }

website/components/ui/cards/subResult.tsx

@@ -27,7 +27,7 @@ export const SubResult = ({ result, ...props }: { result: TranslateRequest }) =>
     const { strings } = useLanguage();
     const service = new Service(result.data.service)
     return <div className="w-1/4 p-1 mx-1 min-w-[300px]">
-        <Card clickable={result.success} shadow={false} className={result.success ? "opacity-100" : "opacity-50"}>
+        <Card onClick={() => {navigator.clipboard.writeText(result.data.result)}} clickable={result.success} shadow={false} className={result.success ? "opacity-100" : "opacity-50"}>
             <span>
                 {result.success ? result.data.result : strings.labels.translationFailure}
             </span>

website/pages/translate.tsx

@@ -1,10 +1,10 @@
 import { DefaultTranslateRequest, TranslateRequest } from 'types/translate'
-import { MainResult, MainResultCard, MainResultLoader } from 'components/ui/cards/mainResult'
 import { SubResult, SubResultLoader } from 'components/ui/cards/subResult'
 import { useEffect, useState } from 'react'
 
 import Configuration from 'config'
 import Head from 'next/head'
+import { MainResult } from 'components/ui/cards/mainResult'
 import type { NextPage } from 'next'
 import { generateRandomID } from 'utils/random'
 import { services } from 'lib/services'
@@ -96,7 +96,7 @@ const Translate: NextPage = () => {
             }
             <div className="mx-3 mt-16">
                 <h2 className="font-semibold text-xl mb-5">{strings.heading.otherTranslations}</h2>
-                <div className='flex flex-row flex-wrap w-full'>
+                <div className='flex flex-row flex-wrap w-full justify-center md:justify-start'>
                     {results.slice(1).map((result, index) => <SubResult key={index} result={result} />)}
                     {
                         toLoad > 0