layout changes

src/components/Test/content/edit-utils/sidebar.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import StageMode from "@/components/Test/content/edit-utils/stage-mode";
-
-export default function Sidebar() {
-  return (
-    <>
-      <StageMode />
-    </>
-  );
-}

src/components/Test/content/edit-utils/stage-mode.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { PiBeerBottle } from "react-icons/pi";
-
-export default function StageMode() {
-  return (
-    <div className="grid gap-2">
-      <HoverCard openDelay={200}>
-        <HoverCardTrigger asChild>
-          <span className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            Taille de l&apos;etquieutte
-          </span>
-        </HoverCardTrigger>
-        <HoverCardContent className="w-[320px] text-sm" side="left">
-          Sélectionnez la taille de votre raquette parmi les trois tailles
-          disponibles : S, M, L.
-        </HoverCardContent>
-      </HoverCard>
-      <TabsList className="grid h-[2.5rem] grid-cols-3">
-        <TabsTrigger value="complete">
-          <span className="sr-only">Complete</span>
-          <PiBeerBottle size={10} />
-        </TabsTrigger>
-        <TabsTrigger value="insert">
-          <span className="sr-only">Insert</span>
-          <PiBeerBottle size={15} />
-        </TabsTrigger>
-        <TabsTrigger value="edit">
-          <span className="sr-only">Edit</span>
-          <PiBeerBottle size={22} />
-        </TabsTrigger>
-      </TabsList>
-    </div>
-  );
-}

src/components/Test/content/playground-area/stage-area.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { TabsContent } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { CounterClockwiseClockIcon } from "@radix-ui/react-icons";
-import Canvas from "@/components/canvas";
-
-export default function StageArea() {
-  return (
-    <TabsContent value="complete" className="mt-0 border-0 p-0">
-      <div className="flex h-full flex-col space-y-4">
-        <div className="min-h-[400px] flex-1 rounded-md border border-input bg-background p-4 2xl:min-h-[750px]">
-          <Canvas />
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Button>Submit</Button>
-          <Button variant="secondary">
-            <span className="sr-only">Show history</span>
-            <CounterClockwiseClockIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </TabsContent>
-  );
-}

src/components/Test/content/playground.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Tabs } from "@/components/ui/tabs";
-import Sidebar from "@/components/Test/content/edit-utils/sidebar";
-import StageArea from "@/components/Test/content/playground-area/stage-area";
-
-export default function Playground() {
-  return (
-    <Tabs defaultValue="complete" className="flex-1">
-      <div className="container h-full py-6">
-        <div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
-          <div className="md:order-1">
-            <StageArea />
-          </div>
-          <div className="hidden flex-col space-y-4 sm:flex md:order-2">
-            <Sidebar />
-          </div>
-        </div>
-      </div>
-    </Tabs>
-  );
-}

src/components/layout/header/Header.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { Save } from "@/components/Test/navbar/Save";
-import { Preview } from "@/components/Test/navbar/Preview";
-import { SelectVigneron } from "@/components/Test/navbar/select-vigneron";
-import { presets } from "@/components/Test/navbar/list-de-vignerons";
+import { Save } from "@/components/layout/header/Save";
+import { Preview } from "@/components/layout/header/Preview";
+import { SelectVigneron } from "@/components/layout/header/select-vigneron";
+import { presets } from "@/components/layout/header/list-de-vignerons";
 import { UserNav } from "@/components/layout/user-nav";
 
-export default function Navbar() {
+export default function Header() {
   return (
     <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
       <h2 className="text-lg font-semibold">Vitiquette</h2>

src/components/layout/header/Preview.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -7,6 +6,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 
 export function Preview() {
   return (

src/components/layout/header/select-vigneron.tsx

@@ -4,9 +4,6 @@ import * as React from "react";
 import { useRouter } from "next/navigation";
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import { type PopoverProps } from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -19,8 +16,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-
 import { type Preset } from "./list-de-vignerons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 interface PresetSelectorProps extends PopoverProps {
   presets: Preset[];

src/components/layout/layout.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
 import React from "react";
+import { Sidebar } from "@/components/layout/sidebar/sidebar";
+import Header from "@/components/layout/header/Header";
 import { Separator } from "@/components/ui/separator";
 import { Tabs } from "@/components/ui/tabs";
-import { Sidebar } from "@/components/layout/sidebar/sidebar";
-import { Navbar } from "@/components/layout/navbar";
 
 type Props = {
   children: ReactNode;
@@ -12,16 +12,23 @@ type Props = {
 export const Layout = ({ children }: Props) => {
   return (
     <div className="h-full overflow-hidden rounded-[0.5rem] border bg-background  shadow">
-      <Navbar />
-      <div className="flex h-full ">
+      <Header />
+      <Separator />
+
+      <div className="container  py-6 ">
+        <div className="grid h-full items-stretch gap-6 md:min-h-[600px] md:grid-cols-[1fr_350px] lg:min-h-[700px]   ">
+          <div className="rounded-md border md:order-1">{children}</div>
+          <div className="hidden flex-col space-y-4  sm:flex md:order-2">
             <Sidebar />
-        <main className="h-full w-full bg-slate-300">{children}</main>
           </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-      {/*Test Update Version  */}
-
-      {/*  <div className="hidden h-full flex-col md:flex">
-        <Navbar />
+/*<div className="hidden h-full flex-col md:flex">
+  <Header />
   <Separator />
   <Tabs defaultValue="complete" className="flex-1">
     <div className="container h-full py-6">
@@ -33,7 +40,9 @@ export const Layout = ({ children }: Props) => {
       </div>
     </div>
   </Tabs>
-      </div>*/}
+
+  <div className="flex h-full ">
+    <Sidebar />
+    <main className="h-full w-full bg-slate-300">{children}</main>
   </div>
-  );
-};
+</div>;*/

src/components/layout/sidebar/layers.tsx

@@ -19,7 +19,6 @@ import LayerItem from "@/components/layer-item";
 
 export const Layers = () => {
   const dispatch = useAppDispatch();
-
   const currentStep = useAppSelector((state) => state.app.currentStep);
   const items = useAppSelector(
     (state) => state.app.history[currentStep]?.items,

src/components/ui/button.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
-import { Slot } from "@radix-ui/themes";
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -30,27 +30,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
-  },
-);
-Button.displayName = "Button";
+    )
+  }
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }