feat: add location link creation page
This commit is contained in:
parent
f491d12154
commit
2abde4f971
24
package-lock.json
generated
24
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
25
src/components/ui/input.tsx
Normal file
25
src/components/ui/input.tsx
Normal 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 }
|
||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal 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 }
|
||||
24
src/components/ui/textarea.tsx
Normal file
24
src/components/ui/textarea.tsx
Normal 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
113
src/pages/create.astro
Normal 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>
|
||||
|
|
@ -7,9 +7,6 @@ export default {
|
|||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user