add all component + add switch componnent + add ui shadcn

2025-11-18 15:04:36 +03:30
parent 8070a3f837
commit 9b06c7dfc5
12 changed files with 393 additions and 4 deletions
@@ -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>
 );