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/react": "^3.0.9",
|
||||||
"@astrojs/tailwind": "^5.1.0",
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
"@radix-ui/react-icons": "^1.3.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-separator": "^1.0.3",
|
||||||
"@radix-ui/react-slot": "^1.0.2",
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
"@types/react": "^18.2.47",
|
"@types/react": "^18.2.47",
|
||||||
|
@ -1102,6 +1103,29 @@
|
||||||
"react": "^16.x || ^17.x || ^18.x"
|
"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": {
|
"node_modules/@radix-ui/react-primitive": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
|
"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/react": "^3.0.9",
|
||||||
"@astrojs/tailwind": "^5.1.0",
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
"@radix-ui/react-icons": "^1.3.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-separator": "^1.0.3",
|
||||||
"@radix-ui/react-slot": "^1.0.2",
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
"@types/react": "^18.2.47",
|
"@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: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: "2rem",
|
padding: "2rem",
|
||||||
screens: {
|
|
||||||
"2xl": "1400px",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user