feat: translate main components

src/components/LockedContent.tsx

@@ -104,7 +104,7 @@ const LocationButton = ({
               </Button>
 
               <Card className='p-2'>
-                <CardContent className='pb-0 text-center'>İçeriği görmek için butona bas!</CardContent>
+                <CardContent className='pb-0 text-center'>Click to see the photo!</CardContent>
               </Card>
             </div>
           </div>
@@ -113,25 +113,25 @@ const LocationButton = ({
             <img src={imageUrl} className='blur-2xl h-[450px]' />
             <div className='flex flex-col justify-center gap-4 overlay'>
               <Button size='lg' className='text-md'>
-                <LockClosedIcon className='mr-2 h-4 w-4' /> İçerik Kilitli
+                <LockClosedIcon className='mr-2 h-4 w-4' /> Photo is locked
               </Button>
               <Card className='p-2'>
                 {hasPermission ? (
                   <CardContent className='pb-0 text-center'>
-                    <p>İçeriği görmek için konuma gitmelisin!</p>
+                    <p>You'll have to go the location to see it</p>
                     <p>{distanceRemain && `Kalan mesafe: ${distanceRemain}`}</p>
                   </CardContent>
                 ) : (
                   <div className='flex flex-col gap-2'>
                     <CardContent className='pb-0 text-center'>
-                      Ne kadar yaklaştığını görmek için aşağıdaki butona bas.
+                      Click below to see how close you are
                     </CardContent>
 
                     <Button
                       size='sm'
                       className='bg-green-700 hover:bg-green-600 text-md'
                       onClick={() => startWatchingLocation()}>
-                      Konum İzni Ver
+                      Give geolocation permission
                     </Button>
                   </div>
                 )}

src/components/ShareButton.tsx

@@ -4,7 +4,7 @@ const ShareButton = () => {
   const shareLink = async () => {
     const shareData = {
       title: "Konulu Konum",
-      text: "Sevdiklerinizi şaşırtın!",
+      text: "Surprise you're loved ones!",
       url: document.URL
     }
 
@@ -16,7 +16,7 @@ const ShareButton = () => {
       await navigator.clipboard.writeText(document.URL)
       // @ts-ignore
       Toastify({
-        text: "Konulu konum kopyalandı.",
+        text: "Konulu konum copied.",
         duration: 3000,
         gravity: "top", // `top` or `bottom`
         position: "center", // `left`, `center` or `right`
@@ -39,11 +39,11 @@ const ShareButton = () => {
         //@ts-expect-error navigator is not always defined
         window.navigator.share ? (
           <Button className='w-full text-lg' size='lg' onClick={shareLink}>
-            Paylaş
+            Share
           </Button>
         ) : (
           <Button className='w-full text-lg' size='lg' onClick={copyLink}>
-            Paylaş
+            Share
           </Button>
         )
       }

src/pages/[id].astro

@@ -45,10 +45,9 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
       >
         <a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
       </h1>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
+      <p class="leading-7 [&:not(:first-child)]:mt-6 text-xl">
-        Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı
+        You have a message and photo from you friend. To see it, you'll have to
-        görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma
+        go to location below. Once you're close, you'll be able to see it.
-        yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz.
       </p>
     </div>
 
@@ -84,7 +83,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
     <ShareButton client:only />
     <div class="flex justify-center">
       <p class="text-muted-foreground">
-        Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı
+        Photo is unlocked <b>{data?.unlocked_counter}</b> times
       </p>
     </div>
   </main>

src/pages/index.astro

@@ -25,10 +25,8 @@ import { Label } from '@/components/ui/label';
         >
           <a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
         </h1>
-        <p class="leading-7 [&:not(:first-child)]:mt-6">
+        <p class="leading-7 [&:not(:first-child)]:mt-6 text-xl">
-          3 basit adımda fotoğraflarınızı ve videolarınızı <b
+          Lock your files <b>based on a location</b> in three easy steps.
-            >yalnızca belirli bir konumda</b
-          > açılacak şekilde kilitleyin:
         </p>
       </div>
 
@@ -36,12 +34,10 @@ import { Label } from '@/components/ui/label';
         <h2
           class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
         >
-          1. Fotoğraf Seçimi
+          1. Choose a photo
         </h2>
         <p class="leading-7 [&:not(:first-child)]:mt-6">
-          Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
+          Select a photo, it'll be locked based on a location you'll choose.
-          fotoğraf yalnızca belirli bir konumda açılabilecek bir hale
-          getirilecek.
         </p>
         <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
           <Input
@@ -50,9 +46,7 @@ import { Label } from '@/components/ui/label';
             id="photo-selector"
             required
           />
-          <p class="text-sm text-muted-foreground">
+          <p class="text-sm text-muted-foreground">Select a photo.</p>
-            Galerinizden bir fotoğraf seçin.
-          </p>
         </div>
       </div>
 
@@ -60,11 +54,11 @@ import { Label } from '@/components/ui/label';
         <h2
           class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
         >
-          2. Fotoğrafın Açılacağı Konum
+          2. Choose a location
         </h2>
         <p class="leading-7 [&:not(:first-child)]:mt-6">
-          Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
+          Choose a location on the map. Once the <i>konulu konum</i> link is generated,
-          gittiği zaman seçtiğiniz fotoğrafı görebilecek.
+          users will only be able to see this photo on this location.
         </p>
         <div>
           <div
@@ -73,15 +67,15 @@ import { Label } from '@/components/ui/label';
           >
           </div>
           <p class="text-xl mt-2">
-            <span class="font-semibold">Seçilen Konum:</span>
+            <span class="font-semibold">Selected Location:</span>
           </p>
 
           <p
             class="text-lg transition ease-in-out duration-700"
             id="coordinates"
           >
-            Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
+            You haven't chosen a location yet, please click on a point on the
-            basınız.
+            map to choose a location.
           </p>
 
           <p
@@ -97,17 +91,17 @@ import { Label } from '@/components/ui/label';
         <h2
           class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
         >
-          3. Fotoğraf Açıklaması
+          3. Photo description
         </h2>
         <div class="grid w-full max-w-md items-center gap-2 mt-4">
           <div class="grid w-full items-center gap-1.5">
             <Label htmlFor="location-author" className="lg:text-lg text-md">
-              Gönderici
+              Sender
             </Label>
             <Input
               id="location-author"
               name="author"
-              placeholder="İsminizi buraya yazınız."
+              placeholder="Enter your name"
               className="lg:text-lg text-md"
               required
             />
@@ -117,18 +111,18 @@ import { Label } from '@/components/ui/label';
               htmlFor="location-description"
               className="lg:text-lg text-md"
             >
-              Açıklama
+              Description
             </Label>
             <Textarea
-              placeholder="Açıklamanızı buraya yazınız."
+              placeholder="Enter your description"
               name="description"
               id="location-description"
               className="lg:text-lg text-md"
               required
             />
             <p class="text-sm text-muted-foreground">
-              Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
+              Enter a description, it'll be shown on top of the photo you
-              görünecek.
+              selected.
             </p>
           </div>
         </div>
@@ -138,7 +132,7 @@ import { Label } from '@/components/ui/label';
             htmlFor="kvkk"
             className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
-            Konulu Konum'u KVKK kapsamında dava etmeyeceğimi onaylıyorum.
+            I'm not uploading a personal data.
           </Label>
         </div>
 
@@ -152,7 +146,7 @@ import { Label } from '@/components/ui/label';
             className="mr-2 h-4 w-4 animate-spin hidden"
             id="submit-button-reload"
           />
-          Bağlantıyı Oluştur
+          Generate
         </Button>
       </div>
     </form>