diff --git a/src/assets/images/close-circle.svg b/src/assets/images/close-circle.svg new file mode 100644 index 0000000..8238cd0 --- /dev/null +++ b/src/assets/images/close-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/DefaulModal.tsx b/src/components/DefaulModal.tsx new file mode 100644 index 0000000..0024fd7 --- /dev/null +++ b/src/components/DefaulModal.tsx @@ -0,0 +1,56 @@ +import { FC, Fragment, ReactNode, useEffect } from 'react' +import HeaderModal from './HeaderModal' + +interface Props { + open: boolean, + close: () => void, + children: ReactNode, + isHeader?: boolean, + title_header?: string, + width?: number +} + +const DefaulModal: FC = (props: Props) => { + + useEffect(() => { + if (props.open) { + document.body.style.overflow = 'hidden' + } else { + document.body.style.overflow = 'auto' + } + }, [props.open]) + + + return ( + + { + props.open && ( + +
+
+
+ + + { + props.isHeader && props.title_header && +
+ +
+ } + + {props.children} + + +
+
+
+ +
+ + ) + } + + ) +} + +export default DefaulModal \ No newline at end of file diff --git a/src/components/HeaderModal.tsx b/src/components/HeaderModal.tsx new file mode 100644 index 0000000..8dae7aa --- /dev/null +++ b/src/components/HeaderModal.tsx @@ -0,0 +1,21 @@ +import { FC } from 'react' +import XIcon from '../assets/images/close-circle.svg' + + +type Props = { + label: string, + close: () => void, +} + +const HeaderModal: FC = (props: Props) => { + return ( +
+
{props.label}
+
+ close +
+
+ ) +} + +export default HeaderModal \ No newline at end of file diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 2f642bb..f66735e 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -21,7 +21,7 @@ const Input: FC = (props: Props) => { const [showPassword, setShowPassword] = useState(false) const inputClass = clx( - 'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border', + 'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border', props.readOnly && 'bg-gray-100', props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10', props.className diff --git a/src/components/Select.tsx b/src/components/Select.tsx new file mode 100644 index 0000000..49faf8b --- /dev/null +++ b/src/components/Select.tsx @@ -0,0 +1,44 @@ +import { FC, SelectHTMLAttributes } from 'react' + +export type ItemsSelectType = { + value: string, + label: string, +} +type Props = { + className?: string, + items: ItemsSelectType[], + error_text?: string, + placeholder?: string, +} & SelectHTMLAttributes + +const Select: FC = (props: Props) => { + return ( +
+ + { + props.error_text && props.error_text !== '' ? +
+ {props.error_text} +
+ : null + } +
+ + ) +} + +export default Select \ No newline at end of file diff --git a/src/index.css b/src/index.css index b0b8c00..1386a20 100644 --- a/src/index.css +++ b/src/index.css @@ -68,3 +68,16 @@ textarea::placeholder { border-radius: 24px; /* تطابق با rx و ry */ overflow: hidden; /* برای رفع مشکلات برش */ } + +.modalGlass { + background: rgba(0, 0, 0, 0.436); + background-blend-mode: multiply; + + backdrop-filter: blur(7px); +} +.modalGlass2 { + background: rgba(255, 255, 255, 0.502); + background-blend-mode: multiply; + + /* backdrop-filter: blur(5px); */ +} diff --git a/src/langs/fa.json b/src/langs/fa.json index ed17969..237392d 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -72,6 +72,8 @@ "access": "دسترسی سریع", "add_access": "دسترسی سریع تازه ایجاد کنید.", "danak_learning": "آموزش داناک", - "see_all": "دیدن همه" - } + "see_all": "دیدن همه", + "create_new_access": "ایجاد دسترسی سریع" + }, + "all": "همه" } diff --git a/src/pages/home/components/BoxNewAccessbility.tsx b/src/pages/home/components/BoxNewAccessbility.tsx index edc9fa3..b4c395a 100644 --- a/src/pages/home/components/BoxNewAccessbility.tsx +++ b/src/pages/home/components/BoxNewAccessbility.tsx @@ -1,42 +1,135 @@ import { Add } from 'iconsax-react' -import { FC } from 'react' +import { FC, useState } from 'react' +import DefaulModal from '../../../components/DefaulModal' +import { useTranslation } from 'react-i18next' +import Input from '../../../components/Input' +import Select from '../../../components/Select' const BoxNewAccessbility: FC = () => { + + const [open, setOpen] = useState(false) + const { t } = useTranslation('global') + return ( -
- +
setOpen(true)} + className="flex-1 flex justify-center items-center h-[160px]" style={{ - position: 'absolute', - top: 0, - left: 0, - zIndex: -1, - borderRadius: '22px', + position: 'relative', }} > - - -
- + xmlns="http://www.w3.org/2000/svg" + style={{ + position: 'absolute', + top: 0, + left: 0, + zIndex: -1, + borderRadius: '22px', + }} + > + + +
+ +
+ +
-
+ + setOpen(false)} + isHeader={true} + title_header={t('home.create_new_access')} + > +
+
+
+ +
+ + */} +
+
+
+
+
+
+
+ دی منو +
+
+ منو رستوران +
+
+
+
+ {/* */} +
+
+
+
+
+
+
+ دی منو +
+
+ منو رستوران +
+
+
+
+ {/* */} +
+
+
+
+ + + ) } diff --git a/src/pages/home/components/DanakLearning.tsx b/src/pages/home/components/DanakLearning.tsx index 1e833bc..b524add 100644 --- a/src/pages/home/components/DanakLearning.tsx +++ b/src/pages/home/components/DanakLearning.tsx @@ -21,43 +21,21 @@ const DanakLearning: FC = () => {
-
+
danak-learning-1
-
+
لورم ایپسوم متن ساختگی با تولید سادگی
-
-
-
دیزاین ,
-
۲۴ دقیقه
-
-
- آذر ماه 1403 -
+
+
دیزاین ,
+
۲۴ دقیقه
-
-
-
-
- danak-learning-1 -
- -
-
- لورم ایپسوم متن ساختگی با تولید سادگی -
-
-
-
دیزاین ,
-
۲۴ دقیقه
-
-
- آذر ماه 1403 -
+
+ آذر ماه 1403
diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 259c075..729cbbf 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -7,11 +7,11 @@ import Home from '../pages/home/Home' const MainRouter: FC = () => { return ( -
+
-
-
+
+
} />