93 lines
2.3 KiB
Plaintext
93 lines
2.3 KiB
Plaintext
---
|
||
import '@/styles/globals.css';
|
||
import '../styles/locked-page.css';
|
||
|
||
import Layout from '../layouts/Layout.astro';
|
||
import ShareButton from '../components/ShareButton';
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card';
|
||
import { CalendarIcon } from '@radix-ui/react-icons';
|
||
import LockedContent from '@/components/LockedContent';
|
||
import { Separator } from '@/components/ui/separator';
|
||
import type { ContentTable } from '@/lib/db';
|
||
import dayjs from 'dayjs';
|
||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||
import utc from 'dayjs/plugin/utc';
|
||
|
||
type Content = Omit<ContentTable, 'url'>;
|
||
|
||
const { id } = Astro.params;
|
||
|
||
const res = await fetch(
|
||
`${import.meta.env.PUBLIC_HOME_URL}/api/content?id=${id}`
|
||
);
|
||
|
||
const data: Content | null = res.status === 200 ? await res.json() : null;
|
||
|
||
dayjs.extend(relativeTime);
|
||
|
||
dayjs.extend(utc);
|
||
|
||
// @ts-expect-error Generated<string> is string
|
||
const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
||
---
|
||
|
||
<Layout>
|
||
<main class="flex flex-col gap-4">
|
||
<div>
|
||
<h1
|
||
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
|
||
>
|
||
Konulu Konum
|
||
</h1>
|
||
<p class="leading-7 [&:not(:first-child)]:mt-6">
|
||
Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı
|
||
görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma
|
||
yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz.
|
||
</p>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<Card className="w-full">
|
||
<CardHeader>
|
||
<CardTitle>{data?.author}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p>{data?.description}</p>
|
||
</CardContent>
|
||
<CardFooter className="gap-2">
|
||
<CalendarIcon />
|
||
<p>{dateFromNow}</p>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
<LockedContent
|
||
contentId={data?.id}
|
||
imageUrl={data?.blob_url}
|
||
location={data?.loc}
|
||
client:load
|
||
/>
|
||
|
||
<div
|
||
id="map"
|
||
class="w-full h-[450px] rounded"
|
||
data-target-location={data?.loc}
|
||
>
|
||
</div>
|
||
|
||
<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ı
|
||
</p>
|
||
</div>
|
||
</main>
|
||
<script src="../scripts/initMap.js"></script>
|
||
</Layout>
|