feat: add location link creation page

This commit is contained in:
log101 2024-01-18 21:07:14 +03:00
parent f491d12154
commit 2abde4f971
7 changed files with 211 additions and 3 deletions

24
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@types/react": "^18.2.47",
@ -1102,6 +1103,29 @@
"react": "^16.x || ^17.x || ^18.x"
}
},
"node_modules/@radix-ui/react-label": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
"integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-primitive": "1.0.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",

View File

@ -14,6 +14,7 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@types/react": "^18.2.47",

View File

@ -0,0 +1,25 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

View File

@ -0,0 +1,24 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

View File

@ -0,0 +1,24 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Textarea.displayName = "Textarea"
export { Textarea }

113
src/pages/create.astro Normal file
View File

@ -0,0 +1,113 @@
---
import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { CalendarIcon } from '@radix-ui/react-icons';
import '../styles/locked-page.css';
import LockedContent from '@/components/LockedContent';
import { Separator } from '@/components/ui/separator';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
---
<Layout>
<main class="flex flex-col gap-8">
<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">
3 basit adımda fotoğraflarınızı ve videolarınızı <b
>yalnızca belirli bir konumda</b
> açılacak şekilde kilitleyin:
</p>
</div>
<div>
<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
</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
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 id="picture" type="file" />
<p class="text-sm text-muted-foreground">
Galerinizden bir fotoğraf seçin.
</p>
</div>
</div>
<div>
<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
</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
gittiği zaman seçtiğiniz fotoğrafı görebilecek.
</p>
<div>
<div id="map" class="w-full h-[450px] rounded mt-4"></div>
<Button className="w-full bg-green-600 hover:bg-green-500">
Konumu Seç
</Button>
</div>
</div>
<div>
<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ı
</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
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">
<Textarea placeholder="Açıklamanızı buraya yazınız." />
<p class="text-sm text-muted-foreground">Bir açıklama girin.</p>
</div>
</div>
<div>
<h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
>
4. (Zorunlu Değil) Bağlantı Şifresi
</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
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">
<Label htmlFor="password">Şifre</Label>
<Input id="password" type="password" />
<p class="text-sm text-muted-foreground">
Bağlantınız için bir şifre girin, açıklama ve fotoğrafın görülmesi
için önce bu şifrenin girilmesi istenecek.
</p>
</div>
</div>
<Button className="w-full">Bağlantıyı Oluştur</Button>
</main>
<script src="../scripts/initMap.js"></script>
</Layout>

View File

@ -7,9 +7,6 @@ export default {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {