almost change all layouts to ssr
This commit is contained in:
@@ -9,7 +9,7 @@ function Caption({ data, loading }) {
|
||||
<CustomLoading loading={loading} width="full" height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_first}
|
||||
src={data?.cover_first}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
@@ -19,14 +19,14 @@ function Caption({ data, loading }) {
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
dangerouslySetInnerHTML={{ __html: data?.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width="full" height={500}>
|
||||
<Image
|
||||
className="rounded-[8px] overflow-hidden w-full"
|
||||
src={data.cover_second}
|
||||
src={data?.cover_second}
|
||||
alt="cover-blog"
|
||||
height={570}
|
||||
width={808}
|
||||
@@ -36,7 +36,7 @@ function Caption({ data, loading }) {
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={20}>
|
||||
<div
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
dangerouslySetInnerHTML={{ __html: data?.caption }}
|
||||
/>
|
||||
</MultilineLoading>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,7 @@ function Head({ data, loading }) {
|
||||
</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
{data.date_of_release}
|
||||
{data?.date_of_release}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@ function Head({ data, loading }) {
|
||||
</p>
|
||||
<TextLoading width={55} height={22} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
{data.time}
|
||||
{data?.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import { getStateInfo } from "@/lib/getStateInfo";
|
||||
import Footer from "./footer";
|
||||
import Header from "./header";
|
||||
|
||||
function StLayout({ children }) {
|
||||
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} />
|
||||
</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;
|
||||
@@ -17,15 +17,23 @@ import HeadMenu from "./menu/HeadMenu";
|
||||
import ListMenu from "./menu/ListMenu";
|
||||
import { useState } from "react";
|
||||
|
||||
const socialMedias = [<Linkedin />, <Telegram />, <Whatsapp />, <Instagram />];
|
||||
|
||||
const head = [
|
||||
{ icon: <LocationF />, text: "جستجوی پزشک در شهر شما" },
|
||||
{ icon: <CalendarAddF />, text: "نوبت گیری سریع و آسان" },
|
||||
{ icon: <StethoscopeF />, text: "دشبورد اختصاصی برای پزشکان" },
|
||||
];
|
||||
|
||||
function Footer() {
|
||||
function Footer({ matchedCity }) {
|
||||
const socialMedias = [{
|
||||
icon: <Instagram />,
|
||||
name: 'instagram'
|
||||
}, {
|
||||
icon: <Telegram />,
|
||||
name: 'telegram'
|
||||
}, {
|
||||
icon: <Whatsapp />,
|
||||
name: 'whatsapp'
|
||||
}];
|
||||
const [openMenu, setOpenMenu] = useState({
|
||||
right: false,
|
||||
left: false,
|
||||
@@ -59,11 +67,8 @@ function Footer() {
|
||||
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
|
||||
{/* Icon */}
|
||||
<Logo />
|
||||
<p className="w-full lg:w-fit text-[#616161] text-[14px] font-normal">
|
||||
724 یک وبسایت نوبت دهی آنلاین می باشد که
|
||||
<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران
|
||||
فراهم کرده
|
||||
<br className="hidden lg:flex" /> است.{" "}
|
||||
<p className="w-full lg:w-fit lg:max-w-[260px] text-[#616161] text-[14px] font-normal">
|
||||
{matchedCity?.footerDescription}
|
||||
</p>
|
||||
<div className="hidden lg:flex">
|
||||
<LogoNamad />
|
||||
@@ -101,8 +106,8 @@ function Footer() {
|
||||
key={idx}
|
||||
className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
|
||||
>
|
||||
<Link href="/" className="min-h-fit">
|
||||
{item}
|
||||
<Link href={matchedCity?.socialMedia[item.name] || '/'} className="min-h-fit">
|
||||
{item.icon}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
@@ -113,7 +118,7 @@ function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">
|
||||
کلیه حقوق وبسایت برای این شرکت می باشد.
|
||||
{matchedCity?.footerDisclaimer}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -10,7 +10,7 @@ import BgGray from "./list/col/BgGray";
|
||||
import UserLogin from "@/components/icons/UserLogin";
|
||||
import { useState } from "react";
|
||||
|
||||
function Content({ matchedCity }) {
|
||||
function Content({ matchedCity, name }) {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
@@ -23,7 +23,7 @@ function Content({ matchedCity }) {
|
||||
>
|
||||
<div>
|
||||
<BgGray isActive={isActive} setIsActive={setIsActive} />
|
||||
<Col name={name} 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">
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import Content from "./Content";
|
||||
// import { getStateInfo } from "@/lib/getStateInfo";
|
||||
|
||||
function Header({ name }) {
|
||||
// const { matchedCity } = getStateInfo();
|
||||
function Header({ matchedCity, name }) {
|
||||
|
||||
return (
|
||||
<div className="bg-[#FFF] rounded-lg w-full mx-auto">
|
||||
<Content
|
||||
// matchedCity={matchedCity}
|
||||
matchedCity={matchedCity}
|
||||
name={name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { isActiveURL } from "@/helper";
|
||||
|
||||
function Col({ isActive, setIsActive, name }) {
|
||||
function Col({ isActive, name }) {
|
||||
return (
|
||||
<div className="flex lg:hidden">
|
||||
<div
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { getStateInfo } from "@/lib/getStateInfo";
|
||||
import Footer from "./footer";
|
||||
import Header from "./header";
|
||||
|
||||
import Sidebar from "./sidebar";
|
||||
|
||||
function Layout({
|
||||
@@ -17,9 +15,8 @@ function Layout({
|
||||
user,
|
||||
value,
|
||||
setValue,
|
||||
matchedCity
|
||||
}) {
|
||||
const { matchedCity } = getStateInfo();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<main
|
||||
@@ -28,7 +25,7 @@ function Layout({
|
||||
>
|
||||
<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 name={name} />
|
||||
<Header name={name} matchedCity={matchedCity} />
|
||||
</div>
|
||||
</header>
|
||||
<section
|
||||
@@ -57,7 +54,7 @@ function Layout({
|
||||
<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 />
|
||||
<Footer matchedCity={matchedCity} />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user