Compare commits

...

1 Commits

Author SHA1 Message Date
31f045c80c feat: translate main components 2024-02-29 16:11:10 +03:00
4 changed files with 33 additions and 40 deletions

View File

@ -104,7 +104,7 @@ const LocationButton = ({
</Button> </Button>
<Card className='p-2'> <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> </Card>
</div> </div>
</div> </div>
@ -113,25 +113,25 @@ const LocationButton = ({
<img src={imageUrl} className='blur-2xl h-[450px]' /> <img src={imageUrl} className='blur-2xl h-[450px]' />
<div className='flex flex-col justify-center gap-4 overlay'> <div className='flex flex-col justify-center gap-4 overlay'>
<Button size='lg' className='text-md'> <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> </Button>
<Card className='p-2'> <Card className='p-2'>
{hasPermission ? ( {hasPermission ? (
<CardContent className='pb-0 text-center'> <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> <p>{distanceRemain && `Kalan mesafe: ${distanceRemain}`}</p>
</CardContent> </CardContent>
) : ( ) : (
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
<CardContent className='pb-0 text-center'> <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> </CardContent>
<Button <Button
size='sm' size='sm'
className='bg-green-700 hover:bg-green-600 text-md' className='bg-green-700 hover:bg-green-600 text-md'
onClick={() => startWatchingLocation()}> onClick={() => startWatchingLocation()}>
Konum İzni Ver Give geolocation permission
</Button> </Button>
</div> </div>
)} )}

View File

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

View File

@ -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> <a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
</h1> </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> </p>
</div> </div>
@ -84,7 +83,7 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
<ShareButton client:only /> <ShareButton client:only />
<div class="flex justify-center"> <div class="flex justify-center">
<p class="text-muted-foreground"> <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> </p>
</div> </div>
</main> </main>

View File

@ -25,10 +25,8 @@ import { Label } from '@/components/ui/label';
> >
<a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a> <a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
</h1> </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> </p>
</div> </div>
@ -36,12 +34,10 @@ import { Label } from '@/components/ui/label';
<h2 <h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0" 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> </h2>
<p class="leading-7 [&:not(:first-child)]:mt-6"> <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> </p>
<div class="grid w-full max-w-sm items-center gap-1.5 mt-4"> <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
<Input <Input
@ -50,9 +46,7 @@ import { Label } from '@/components/ui/label';
id="photo-selector" id="photo-selector"
required 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>
</div> </div>
@ -60,11 +54,11 @@ import { Label } from '@/components/ui/label';
<h2 <h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0" 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> </h2>
<p class="leading-7 [&:not(:first-child)]:mt-6"> <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> </p>
<div> <div>
<div <div
@ -73,15 +67,15 @@ import { Label } from '@/components/ui/label';
> >
</div> </div>
<p class="text-xl mt-2"> <p class="text-xl mt-2">
<span class="font-semibold">Seçilen Konum:</span> <span class="font-semibold">Selected Location:</span>
</p> </p>
<p <p
class="text-lg transition ease-in-out duration-700" class="text-lg transition ease-in-out duration-700"
id="coordinates" 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>
<p <p
@ -97,17 +91,17 @@ import { Label } from '@/components/ui/label';
<h2 <h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0" 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> </h2>
<div class="grid w-full max-w-md items-center gap-2 mt-4"> <div class="grid w-full max-w-md items-center gap-2 mt-4">
<div class="grid w-full items-center gap-1.5"> <div class="grid w-full items-center gap-1.5">
<Label htmlFor="location-author" className="lg:text-lg text-md"> <Label htmlFor="location-author" className="lg:text-lg text-md">
Gönderici Sender
</Label> </Label>
<Input <Input
id="location-author" id="location-author"
name="author" name="author"
placeholder="İsminizi buraya yazınız." placeholder="Enter your name"
className="lg:text-lg text-md" className="lg:text-lg text-md"
required required
/> />
@ -117,18 +111,18 @@ import { Label } from '@/components/ui/label';
htmlFor="location-description" htmlFor="location-description"
className="lg:text-lg text-md" className="lg:text-lg text-md"
> >
ıklama Description
</Label> </Label>
<Textarea <Textarea
placeholder="ıklamanızı buraya yazınız." placeholder="Enter your description"
name="description" name="description"
id="location-description" id="location-description"
className="lg:text-lg text-md" className="lg:text-lg text-md"
required required
/> />
<p class="text-sm text-muted-foreground"> <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> </p>
</div> </div>
</div> </div>
@ -138,7 +132,7 @@ import { Label } from '@/components/ui/label';
htmlFor="kvkk" htmlFor="kvkk"
className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 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> </Label>
</div> </div>
@ -152,7 +146,7 @@ import { Label } from '@/components/ui/label';
className="mr-2 h-4 w-4 animate-spin hidden" className="mr-2 h-4 w-4 animate-spin hidden"
id="submit-button-reload" id="submit-button-reload"
/> />
Bağlantıyı Oluştur Generate
</Button> </Button>
</div> </div>
</form> </form>