change element component & add menu head & responsive head home

2024-08-10 03:23:34 +03:30
parent 01de360360
commit 0afe0a39b0
14 changed files with 243 additions and 69 deletions
@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from "@mui/material";
+import Logo from "@/app/component/Logo";
+import Link from "next/link";
+import Row from "./list/Row";
+import Col from "./list/col";
+import ButtonMenu from "./list/col/ButtonMenu";
+import { useState } from "react";
+import BgGray from "./list/col/BgGray";
+import UserLogin from "@/components/icons/UserLogin";
+
+function Header({ name }) {
+
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+        <div
+            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
+        >
+            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
+                <div className="">
+                    <BgGray
+                        isActive={isActive}
+                        setIsActive={setIsActive}
+                    />
+                    <Col
+                        isActive={isActive}
+                        setIsActive={setIsActive}
+                    />
+                    <div className="relative flex flex-row-reverse gap-2">
+                        <Logo />
+                        <div className="flex lg:hidden">
+                            <ButtonMenu
+                                isActive={isActive}
+                                setIsActive={setIsActive}
+                            />
+                            <Logo isAbsolute={true} />
+                        </div>
+                    </div>
+                </div>
+                <Row />
+                <Link href='/signin'>
+                    <Button
+                        className="!hidden lg:!flex"
+                        variant="outlined"
+                        color="primary"
+                    >
+                        ورود | ثبت نام
+                    </Button>
+                    <Button
+                        className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
+                        variant="text"
+                        color="primary"
+                    >
+                        <div className="flex lg:hidden">
+                            <UserLogin />
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default Header