change format all file
This commit is contained in:
Ehsan
@@ -3,31 +3,29 @@ import Footer from "./footer";
|
||||
import Header from "./header";
|
||||
|
||||
function StLayout({ children, name }) {
|
||||
const { matchedCity } = getStateInfo();
|
||||
const { matchedCity } = getStateInfo();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<main className="w-full min-h-screen">
|
||||
<header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
|
||||
<div className="w-full padding-responsive">
|
||||
<Header matchedCity={matchedCity} name={name} />
|
||||
</div>
|
||||
</header>
|
||||
<section
|
||||
className="opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]"
|
||||
>
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
<footer className="bg-[#F5F5F5] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
|
||||
<div className="pt-[44px] bg-[rgba(255,255,255,0.45)]">
|
||||
<div className="padding-responsive">
|
||||
<Footer matchedCity={matchedCity} />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
return (
|
||||
<div>
|
||||
<main className="w-full min-h-screen">
|
||||
<header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
|
||||
<div className="w-full padding-responsive">
|
||||
<Header matchedCity={matchedCity} name={name} />
|
||||
</div>
|
||||
</header>
|
||||
<section className="opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]">
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
<footer className="bg-[#F5F5F5] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
|
||||
<div className="pt-[44px] bg-[rgba(255,255,255,0.45)]">
|
||||
<div className="padding-responsive">
|
||||
<Footer matchedCity={matchedCity} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StLayout;
|
||||
|
||||
@@ -24,16 +24,20 @@ const head = [
|
||||
];
|
||||
|
||||
function Footer({ matchedCity }) {
|
||||
const socialMedias = [{
|
||||
icon: <Instagram />,
|
||||
name: 'instagram'
|
||||
}, {
|
||||
icon: <Telegram />,
|
||||
name: 'telegram'
|
||||
}, {
|
||||
icon: <Whatsapp />,
|
||||
name: 'whatsapp'
|
||||
}];
|
||||
const socialMedias = [
|
||||
{
|
||||
icon: <Instagram />,
|
||||
name: "instagram",
|
||||
},
|
||||
{
|
||||
icon: <Telegram />,
|
||||
name: "telegram",
|
||||
},
|
||||
{
|
||||
icon: <Whatsapp />,
|
||||
name: "whatsapp",
|
||||
},
|
||||
];
|
||||
const [openMenu, setOpenMenu] = useState({
|
||||
right: false,
|
||||
left: false,
|
||||
@@ -106,7 +110,10 @@ function Footer({ matchedCity }) {
|
||||
key={idx}
|
||||
className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
|
||||
>
|
||||
<Link href={matchedCity?.socialMedia[item.name] || '/'} className="min-h-fit">
|
||||
<Link
|
||||
href={matchedCity?.socialMedia[item.name] || "/"}
|
||||
className="min-h-fit"
|
||||
>
|
||||
{item.icon}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -11,48 +11,44 @@ import UserLogin from "@/components/icons/UserLogin";
|
||||
import { useState } from "react";
|
||||
|
||||
function Content({ matchedCity, name }) {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px]
|
||||
flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
|
||||
${isActive ? "!pr-0" : "!px-4"}
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<BgGray isActive={isActive} setIsActive={setIsActive} />
|
||||
<Col name={name} isActive={isActive} />
|
||||
<div className="relative flex flex-row-reverse gap-2">
|
||||
<Logo matchedCity={matchedCity} />
|
||||
<div className="flex lg:hidden z-20">
|
||||
<ButtonMenu isActive={isActive} setIsActive={setIsActive} />
|
||||
<Logo isAbsolute={true} matchedCity={matchedCity} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row name={name} />
|
||||
<Link href="/login">
|
||||
<Button
|
||||
className="!hidden lg:!flex"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Button
|
||||
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
<div className="flex lg:hidden">
|
||||
<UserLogin />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
>
|
||||
<div>
|
||||
<BgGray isActive={isActive} setIsActive={setIsActive} />
|
||||
<Col name={name} isActive={isActive} />
|
||||
<div className="relative flex flex-row-reverse gap-2">
|
||||
<Logo matchedCity={matchedCity} />
|
||||
<div className="flex lg:hidden z-20">
|
||||
<ButtonMenu isActive={isActive} setIsActive={setIsActive} />
|
||||
<Logo isAbsolute={true} matchedCity={matchedCity} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<Row name={name} />
|
||||
<Link href="/login">
|
||||
<Button className="!hidden lg:!flex" variant="outlined" color="primary">
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Button
|
||||
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
<div className="flex lg:hidden">
|
||||
<UserLogin />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import Content from "./Content";
|
||||
|
||||
function Header({ matchedCity, name }) {
|
||||
|
||||
return (
|
||||
<div className="bg-[#FFF] rounded-lg w-full mx-auto">
|
||||
<Content
|
||||
matchedCity={matchedCity}
|
||||
name={name}
|
||||
/>
|
||||
<Content matchedCity={matchedCity} name={name} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,10 +9,7 @@ function Row({ name }) {
|
||||
<Link
|
||||
href={nav.link}
|
||||
className={`
|
||||
${nav.link === name
|
||||
? "!text-[#526CAC]"
|
||||
: "text-[#525252]"
|
||||
}
|
||||
${nav.link === name ? "!text-[#526CAC]" : "text-[#525252]"}
|
||||
text-[16px] font-medium
|
||||
`}
|
||||
>
|
||||
|
||||
@@ -23,7 +23,7 @@ function Col({ isActive, name }) {
|
||||
${
|
||||
isActiveURL(
|
||||
nav.link.replace("/", ""),
|
||||
name
|
||||
name,
|
||||
)
|
||||
? "!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]"
|
||||
: "!text-[#525252]"
|
||||
|
||||
@@ -14,7 +14,7 @@ function Layout({
|
||||
user,
|
||||
value,
|
||||
setValue,
|
||||
matchedCity
|
||||
matchedCity,
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
@@ -30,9 +30,10 @@ function Layout({
|
||||
<section
|
||||
className={`
|
||||
opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]
|
||||
${isSidebar &&
|
||||
"padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]"
|
||||
}
|
||||
${
|
||||
isSidebar &&
|
||||
"padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isSidebar && (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import CardD from "@/components/icons/CardD";
|
||||
import LogoutD from "@/components/icons/LogoutD";
|
||||
|
||||
@@ -6,7 +6,7 @@ import { removeToken } from "@/utils";
|
||||
function ModalLogout({ open, handleClose }) {
|
||||
const logout = () => {
|
||||
removeToken();
|
||||
window.location.pathname = '/login'
|
||||
window.location.pathname = "/login";
|
||||
handleClose();
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user