feat: add location link creation page

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/ui/input.tsx

@@ -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 }

src/components/ui/label.tsx

@@ -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 }

src/components/ui/textarea.tsx

@@ -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 }

src/pages/create.astro

@@ -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>

tailwind.config.mjs

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