From 2abde4f9714df0097a58a7170b2e4f1e9b20a243 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Thu, 18 Jan 2024 21:07:14 +0300
Subject: [PATCH] feat: add location link creation page

---
 package-lock.json              |  24 +++++++
 package.json                   |   1 +
 src/components/ui/input.tsx    |  25 ++++++++
 src/components/ui/label.tsx    |  24 +++++++
 src/components/ui/textarea.tsx |  24 +++++++
 src/pages/create.astro         | 113 +++++++++++++++++++++++++++++++++
 tailwind.config.mjs            |   3 -
 7 files changed, 211 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/textarea.tsx
 create mode 100644 src/pages/create.astro

diff --git a/package-lock.json b/package-lock.json
index fb15b2f..2a470c1 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d276ad5..a86992f 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/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 }
diff --git a/src/pages/create.astro b/src/pages/create.astro
new file mode 100644
index 0000000..6595b94
--- /dev/null
+++ b/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>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 1899d51..dc1840f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -7,9 +7,6 @@ export default {
     container: {
       center: true,
       padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
     },
     extend: {
       colors: {