add all component + add switch componnent + add ui shadcn

src/assets/icons/Star.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1338 7.48633L14.3652 7.93555L14.8633 8.0166L20.7432 8.96777L16.5459 13.1943L16.1895 13.5527L16.2676 14.0518L17.1787 19.9375L11.8633 17.252L11.4121 17.0234L10.9609 17.252L5.64453 19.9375L6.55664 14.0518L6.63477 13.5527L6.27832 13.1943L2.08008 8.96777L7.96094 8.0166L8.45898 7.93555L8.69043 7.48633L11.4121 2.18848L14.1338 7.48633Z" stroke="#B2B2B2" stroke-width="2"/>
+</svg>

src/assets/icons/circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11" stroke="#B2B2B2" stroke-width="2"/>
+</svg>

src/assets/icons/square.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="22" height="22" stroke="#B2B2B2" stroke-width="2"/>
+</svg>

src/assets/icons/triangle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.6504 19.25H1.73242L11.6914 2L21.6504 19.25Z" stroke="#B2B2B2" stroke-width="2"/>
+</svg>

src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/helpers/utils";
+
+const Switch = React.forwardRef<
+    React.ElementRef<typeof SwitchPrimitives.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+        className={cn(
+            "peer dltr inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--background))] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[hsl(var(--primary))] data-[state=unchecked]:bg-[hsl(var(--input))]",
+            className
+        )}
+        {...props}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                "pointer-events-none block h-5 w-5 rounded-full bg-[hsl(var(--background))] shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+            )}
+        />
+    </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
+

src/helpers/utils.ts

@@ -1,6 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import type { IGeneralError } from "./types";
 
+/**
+ * Merges class names with tailwind-merge and clsx
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
 /**
  * Concatenates truthy classes into a space-separated string.
  *

src/index.css

@@ -1,5 +1,30 @@
 @import "tailwindcss";
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 0 0% 0%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
 html {
   direction: rtl;
   overflow: hidden;
@@ -56,3 +81,7 @@ html {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE 10+ */
 }
+
+.dltr {
+  direction: ltr;
+}

src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx

@@ -1,6 +1,51 @@
-const RectangleInstruction = () => (
-    <div className="text-sm text-gray-600">
-        <p>برای رسم مستطیل، روی کانوس کلیک کرده و بکشید</p>
+import { type FC } from 'react'
+import SquareIcon from '@/assets/icons/square.svg'
+import CircleIcon from '@/assets/icons/circle.svg'
+import TriangleIcon from '@/assets/icons/triangle.svg'
+import StarIcon from '@/assets/icons/Star.svg'
+import { Switch } from '@/components/ui/switch'
+
+const RectangleInstruction: FC = () => (
+    <div>
+        <h2 className='font-bold'>
+            اشکال
+        </h2>
+
+        <div className='flex flex-wrap mt-7'>
+            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
+                <img src={SquareIcon} alt='square' className='w-6' />
+                <div className='text-[13px]'>
+                    مربع
+                </div>
+            </div>
+            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
+                <img src={CircleIcon} alt='circle' className='w-6' />
+                <div className='text-[13px]'>
+                    دایره
+                </div>
+            </div>
+            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
+                <img src={TriangleIcon} alt='triangle' className='w-6' />
+                <div className='text-[13px]'>
+                    مثلث
+                </div>
+            </div>
+            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
+                <img src={StarIcon} alt='star' className='w-6' />
+                <div className='text-[13px]'>
+                    انتزاعی
+                </div>
+            </div>
+        </div>
+
+        <div className='mt-9 flex justify-between items-center'>
+            <div className='text-[13px]'>
+                استفاده برای ماسک
+            </div>
+            <Switch
+            />
+
+        </div>
     </div>
 );