many update

Author: ln-dev7

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/ui/calendar.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

lib/utils.ts

@@ -1,4 +1,4 @@
-import { ClassValue, clsx } from "clsx"
+import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

package-lock.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "@radix-ui/react-hover-card": "^1.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-menubar": "^1.0.0",
     "@radix-ui/react-navigation-menu": "^1.1.1",
@@ -51,6 +52,7 @@
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
+    "date-fns": "^2.30.0",
     "firebase": "^10.1.0",
     "highlight.js": "^11.7.0",
     "html-to-image": "^1.11.11",
@@ -62,6 +64,7 @@
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
+    "react-day-picker": "^8.8.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.7",
     "react-infinite-scroll-component": "^6.1.0",
@@ -72,7 +75,7 @@
     "sharp": "^0.31.3",
     "tailwind-merge": "^1.14.0",
     "tailwind-scrollbar-hide": "^1.1.7",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-animate": "^1.0.6",
     "yup": "^1.0.2"
   },
   "devDependencies": {

package.json

@@ -25,17 +25,23 @@ import { yupResolver } from "@hookform/resolvers/yup"
 import sdk, { Project } from "@stackblitz/sdk"
 import hljs from "highlight.js"
 import {
+  Calendar,
+  CircleDot,
   Eye,
   EyeOff,
   FileCog,
   FileQuestion,
   Heart,
   LinkIcon,
+  List,
+  ListChecks,
   Loader2,
   MessageSquare,
   Plus,
+  Save,
   Send,
   Settings,
+  Type,
   User,
   View,
 } from "lucide-react"
@@ -68,6 +74,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTrigger,
 } from "@/components/ui/dialog"
@@ -149,6 +156,8 @@ export default function FormPage() {
     })
   }
 
+  // fonction qui prend en param un text et fonction de cela ajoute une <div></div> dans la div #questions - avec un switch case on regarde la valeur du text si c'est "input" on ajoute une div avec un input, si c'est "textarea" on ajoute une div avec un textarea etc...
+
   return (
     <Layout>
       <Head>
@@ -192,18 +201,79 @@ export default function FormPage() {
                   <TabsTrigger value="responses">
                     <MessageSquare className="mr-2 h-4 w-4" />
                     Responses
+                    <span className="flex items-center justify-center bg-slate-200 dark:bg-slate-700 ml-2 px-1 rounded-md">
+                      {dataForm.data.responses.length}
+                    </span>
                   </TabsTrigger>
                   <TabsTrigger value="publish">
                     <Send className="mr-2 h-4 w-4" />
                     Publish
                   </TabsTrigger>
                 </div>
               </TabsList>
-              <TabsContent
-                className="border-none p-0 pt-4"
-                value="questions"
-              ></TabsContent>
-              <TabsContent className="border-none p-0 pt-4" value="responses">
+              <TabsContent className="border-none p-0 pt-4" value="questions">
+                <div className="w-full flex flex-col sm:flex-row items-start gap-4">
+                  <div className="w-full sm:w-[250px] shrink-0 rounded-md flex flex-col gap-2 items-start">
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <Type className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">
+                        Short answer
+                      </span>
+                    </button>
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <Type className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">
+                        Long answer
+                      </span>
+                    </button>
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <CircleDot className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">
+                        Unique choice
+                      </span>
+                    </button>
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <ListChecks className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">
+                        Multi choice
+                      </span>
+                    </button>
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <List className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">
+                        List of choices
+                      </span>
+                    </button>
+                    <button className="hover:bg-slate-100 hover:dark:bg-slate-800 flex items-center justify-start gap-1 py-2 px-4 w-full rounded-md">
+                      <Calendar className="h-5 w-5" />
+                      <span className="ml-2 text-sm font-semibold">Date</span>
+                    </button>
+                    <Separator className="hidden sm:block w-full my-2" />
+                    <div className="hidden sm:flex px-4 flex-col gap-2">
+                      <span className="text-sm">
+                        click on a button to add it in the questions
+                      </span>
+                    </div>
+                  </div>
+                  <Separator className="block sm:hidden w-full my-2" />
+                  <div
+                    id="questions"
+                    className="relative w-full rounded-md px-4 pt-7 pb-4 border overflow-hidden"
+                  >
+                    <div
+                      className={`absolute inset-x-0 top-0 h-3 w-full`}
+                      style={{
+                        background: `${dataForm.data.color}`,
+                      }}
+                    ></div>
+                    <Button variant="outline">
+                      <Save className="mr-2 h-4 w-4" />
+                      Save questions
+                    </Button>
+                  </div>
+                </div>
+              </TabsContent>
+              <TabsContent className="border-none p-0 pt-2" value="responses">
                 {dataForm.data.responses &&
                 dataForm.data.responses.length > 0 ? (
                   <div></div>
@@ -215,7 +285,7 @@ export default function FormPage() {
                   />
                 )}
               </TabsContent>
-              <TabsContent className="border-none p-0 pt-4" value="publish">
+              <TabsContent className="border-none p-0 pt-2" value="publish">
                 <div className="flex h-[450px] shrink-0 items-center justify-center rounded-md border border-dashed border-slate-300 dark:border-slate-700">
                   <div className="mx-auto flex w-full max-w-xl flex-col gap-4 items-center justify-center text-center p-4">
                     <Link