ticket

src/components/DefaulModal.tsx

@@ -45,7 +45,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
                             </div>
                         </div>
 
-                        <div onClick={props.close} className='fixed modalGlass inset-0 z-50 '></div>
+                        <div onClick={props.close} className='fixed size-full bottom-0 right-0 modalGlass inset-0 z-50 '></div>
                     </Fragment>
                 )
             }

src/components/ServiceSection.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+const ServiceSection: FC = () => {
+    return (
+        <div className='flex gap-4'>
+            <div className='size-10 rounded-xl bg-green-300'></div>
+            <div>
+                <div className='text-sm'>
+                    دی منو
+                </div>
+                <div className='text-xs text-description'>
+                    منو رستوران
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ServiceSection

src/components/StatusCircle.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+type Props = {
+    color: string
+}
+
+const StatusCircle: FC<Props> = (props: Props) => {
+    return (
+        <div style={{ background: props.color }} className='size-1.5 rounded-full'>
+
+        </div>
+    )
+}
+
+export default StatusCircle

src/components/Tabs.tsx

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from 'react'
+import { clx } from '../helpers/utils'
+
+type Item = {
+    icon: ReactNode,
+    label: string,
+    value: string,
+}
+
+type Props = {
+    items: Item[],
+    onChange: (value: string) => void,
+    active: string,
+}
+
+const Tabs: FC<Props> = (props: Props) => {
+    return (
+        <div className='px-10  w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+            {
+                props.items.map((item: Item) => {
+                    return (
+                        <div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
+                            'flex flex-col items-center gap-2 cursor-pointer',
+                            props.active === item.value && 'text-black'
+                        )}>
+                            {item.icon}
+                            <div className='text-xs'>
+                                {item.label}
+                            </div>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Tabs

src/components/Td.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react'
+
+interface Props {
+    text: string,
+    children?: ReactNode,
+    dir?: string,
+}
+
+const Td: FC<Props> = (props: Props) => {
+    return (
+        <td className='td' style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
+            {
+                props.text ?
+                    props.text
+                    :
+                    props.children
+            }
+        </td>
+    )
+}
+
+export default Td