log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sample photo

Browse Source
This commit is contained in:
log101 2024-01-14 22:25:46 +03:00
parent e184e055c6
commit 4794b66718
3 changed files with 83 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/sample-selfie.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

27
src/layouts/Layout.astro
View File

@ -1,20 +1,19 @@
--- ---
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description" /> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Konulu Konum</title> <title>Konulu Konum</title>
</head> </head>
<body class="bg-purple-50 container"> <body class="bg-purple-50 container">
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global> <style is:global></style>
</style>

102
src/pages/index.astro
View File

@ -1,53 +1,91 @@
--- ---
import '@/styles/globals.css' import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import { Button } from "@/components/ui/button" import { Button } from '@/components/ui/button';
import { import {
Card, Card,
CardContent, CardContent,
CardFooter, CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card" } from '@/components/ui/card';
import { CalendarIcon } from "@radix-ui/react-icons" import { CalendarIcon } from '@radix-ui/react-icons';
import { LockClosedIcon } from '@radix-ui/react-icons';
const apiKey = import.meta.env.MAPS_SDK_KEY const apiKey = import.meta.env.MAPS_SDK_KEY;
const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V25yhQRsA2NsrXtDp8&key=${apiKey}` const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V25yhQRsA2NsrXtDp8&key=${apiKey}`;
--- ---
<Layout> <Layout>
<main class="flex flex-col gap-3 mt-4"> <main class="flex flex-col gap-3 my-4 items-center">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Ayşe</CardTitle> <CardTitle>Ayşe</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p>Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen lazım 😘</p> <p>
</CardContent> Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
<CardFooter className='gap-2'> lazım 😘
<CalendarIcon /> </p>
<p>5 saat önce</p> </CardContent>
</CardFooter> <CardFooter className="gap-2">
</Card> <CalendarIcon />
<p>5 saat önce</p>
</CardFooter>
</Card>
<Button className='w-full bg-indigo-500'>Haritayı Gizle</Button> <Button className="w-full bg-indigo-500">Haritayı Gizle</Button>
<iframe height="450" style="border:0" loading="lazy" allowfullscreen src={mapSrc}></iframe> <iframe
height="450"
style="border:0"
loading="lazy"
allowfullscreen
src={mapSrc}
class="w-full"></iframe>
<div class="w-full h-[200px] bg-gray-600 rounded"></div> <div class="module w-full h-[450px] p-4">
<Button className='w-full'>Paylaş</Button> <div
</main> class="module-inside flex flex-col justify-center items-center gap-2"
>
<Button>
<LockClosedIcon className="mr-2 h-4 w-4" />İçerik Kilitli
</Button>
<Card className="p-2">
<CardContent className="pb-0 text-center">
İçeriği görmek için konuma gitmelisin!
</CardContent>
</Card>
</div>
</div>
<Button className="w-full">Paylaş</Button>
</main>
</Layout> </Layout>
<style> <style>
gmp-map { .module {
height: 100%; display: grid;
} place-items: center;
position: relative;
overflow: hidden;
}
html, .module::before {
body { content: '';
margin: 0; top: 0;
padding: 0; left: 0;
} width: 100%;
height: 100%;
position: absolute;
background-image: url('/sample-selfie.webp');
background-position: center;
background-repeat: no-repeat;
filter: blur(20px);
}
.module-inside {
position: relative;
}
</style> </style>