feat: add top banner image

pooriaset · May 4, 2024 · 5eee205 · 5eee205
1 parent 3858458
commit 5eee205
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 18 deletions.
diff --git a/src/app/[locale]/(main)/components/TopBanner/TopBanner.tsx b/src/app/[locale]/(main)/components/TopBanner/TopBanner.tsx
@@ -0,0 +1,27 @@
+import { ISliderItem } from '@/components/HomePageSlider/types';
+import Image from 'next/image';
+import React, { FC } from 'react';
+
+export interface TopBannerProps {
+  data: ISliderItem | null;
+}
+const TopBanner: FC<TopBannerProps> = ({ data }) => {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Image
+      width={2800}
+      height={60}
+      src={data.imageUrl}
+      alt="Top Banner"
+      style={{
+        width: '100%',
+        objectFit: 'cover',
+      }}
+    />
+  );
+};
+
+export default TopBanner;
diff --git a/src/app/[locale]/(main)/layout.tsx b/src/app/[locale]/(main)/layout.tsx
@@ -1,10 +1,15 @@
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
+import { ISliderItem } from '@/components/HomePageSlider/types';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_PUBLISHED_PAGES_LIST } from '@/graphql/queries/pages';
-import { GetPublishedPagesListQuery } from '@/graphql/types/graphql';
+import { GET_TOP_BANNER } from '@/graphql/queries/sliders';
+import {
+  GetPublishedPagesListQuery,
+  GetTopBannerQuery,
+} from '@/graphql/types/graphql';
 import { Box } from '@mui/material';
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface MainLayoutProps {
   children: ReactNode;
@@ -22,11 +27,32 @@ const getPagesList = async (): Promise<IPageListItem[]> => {
   return data.pages?.edges?.map((item) => item.node) || [];
 };
 
+const getTopBanner = async () => {
+  const { data } = await getClient().query<GetTopBannerQuery>({
+    query: GET_TOP_BANNER,
+  });
+
+  const _item = data?.sliderCategories?.nodes?.[0].sliders?.edges?.[0]?.node;
+  if (_item && _item?.featuredImage?.node.url) {
+    const data: ISliderItem = {
+      id: _item.id,
+      imageUrl: _item.featuredImage?.node.url,
+      url: _item.url,
+      title: _item.title!,
+    };
+    return data;
+  }
+
+  return null;
+};
+
 const MainLayout: FC<MainLayoutProps> = async ({ children }) => {
   const pagesList = await getPagesList();
+  const topBanner = await getTopBanner();
+
   return (
     <>
-      <Header />
+      <Header topBanner={topBanner} />
       <Box
         sx={{
           pb: { xs: '56px', md: 0 },

diff --git a/src/app/[locale]/(main)/page.tsx b/src/app/[locale]/(main)/page.tsx
@@ -1,6 +1,6 @@
 import BestSellingProducts from '@/components/BestSellingProducts/BestSellingProducts';
 import { HomePageSlider } from '@/components/HomePageSlider';
-import { IHomePageSliderItem } from '@/components/HomePageSlider/types';
+import { ISliderItem } from '@/components/HomePageSlider/types';
 import { MainCategories } from '@/components/MainCategories';
 import { getClient } from '@/graphql/clients/serverSideClient';
 import { GET_MAIN_CATEGORIES } from '@/graphql/queries/categories';
@@ -24,11 +24,11 @@ const getSliders = async () => {
     query: GET_HOMEPAGE_SLIDERS,
   });
 
-  const items: IHomePageSliderItem[] = [];
+  const items: ISliderItem[] = [];
   data?.sliderCategories?.nodes?.map((item) => {
     item.sliders?.edges.forEach((edge) => {
       if (edge.node.featuredImage?.node.url) {
-        const item: IHomePageSliderItem = {
+        const item: ISliderItem = {
           id: edge.node.id,
           title: edge.node.title || '',
           imageUrl: edge.node.featuredImage.node.url,

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,12 +1,18 @@
 'use client';
 
 import { AppBar, Container } from '@mui/material';
-import { Suspense } from 'react';
+import { FC, Suspense } from 'react';
 import DesktopView from '../App/DesktopView';
 import MobileView from '../App/MobileView';
 import { DesktopHeader } from './components';
+import TopBanner, {
+  TopBannerProps,
+} from '@/app/[locale]/(main)/components/TopBanner/TopBanner';
 
-const Header = () => {
+export interface HeaderProps {
+  topBanner: TopBannerProps['data'];
+}
+const Header: FC<HeaderProps> = ({ topBanner }) => {
   return (
     <AppBar
       elevation={0}
@@ -20,6 +26,7 @@ const Header = () => {
         backgroundColor: '#ffffff',
       }}
     >
+      <TopBanner data={topBanner} />
       <Container maxWidth="xl">
         <DesktopView>
           <DesktopHeader />

diff --git a/src/components/HomePageSlider/HomePageSlider.tsx b/src/components/HomePageSlider/HomePageSlider.tsx
@@ -6,10 +6,10 @@ import { useTheme } from '@mui/material';
 import { FC } from 'react';
 import { Autoplay, Navigation, Pagination } from 'swiper/modules';
 import { SliderItem } from './components/SliderItem';
-import { IHomePageSliderItem } from './types';
+import { ISliderItem } from './types';
 
 export interface CarouselProps {
-  items?: IHomePageSliderItem[];
+  items?: ISliderItem[];
 }
 
 const MySwiper: FC<CarouselProps> = ({ items }) => {

diff --git a/src/components/HomePageSlider/components/SliderItem/SliderItem.tsx b/src/components/HomePageSlider/components/SliderItem/SliderItem.tsx
@@ -3,9 +3,9 @@
 import { Link } from '@mui/material';
 import Image from 'next/image';
 import { FC } from 'react';
-import { IHomePageSliderItem } from '../../types';
+import { ISliderItem } from '../../types';
 
-const SliderItem: FC<IHomePageSliderItem> = (props) => {
+const SliderItem: FC<ISliderItem> = (props) => {
   return (
     <Link
       href={props.url || '#'}

diff --git a/src/components/HomePageSlider/types/index.ts b/src/components/HomePageSlider/types/index.ts
@@ -1,6 +1,6 @@
-export interface IHomePageSliderItem {
+export interface ISliderItem {
   id: number | string;
-  title: string;
+  title?: string;
   imageUrl: string;
   url?: string | null;
 }
diff --git a/src/graphql/queries/sliders.ts b/src/graphql/queries/sliders.ts
@@ -5,7 +5,31 @@ import { gql } from '@apollo/client';
  */
 export const GET_HOMEPAGE_SLIDERS = gql`
   query GetHomePageSliders {
-    sliderCategories(where: { slug: "homepage" }) {
+    sliderCategories(where: { slug: "MAIN_HOMEPAGE_SLIDERS" }) {
+      nodes {
+        sliders {
+          edges {
+            node {
+              id: databaseId
+              title
+              url
+              featuredImage {
+                node {
+                  id: databaseId
+                  url: sourceUrl
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const GET_TOP_BANNER = gql`
+  query GetTopBanner {
+    sliderCategories(where: { slug: "TOP_BANNER" }) {
       nodes {
         sliders {
           edges {

diff --git a/src/graphql/types/gql.ts b/src/graphql/types/gql.ts
@@ -19,7 +19,8 @@ const documents = {
     "\n  query GetPage($slug: String) {\n    pages(where: { name: $slug, status: PUBLISH }) {\n      edges {\n        node {\n          title\n          content\n        }\n      }\n    }\n  }\n": types.GetPageDocument,
     "\n  query GetPublishedPagesList {\n    pages(where: { status: PUBLISH }) {\n      edges {\n        node {\n          title\n          slug\n        }\n      }\n    }\n  }\n": types.GetPublishedPagesListDocument,
     "\n  query GetAllProducts(\n    $stockStatus: [StockStatusEnum]\n    $orderBy: [ProductsOrderbyInput]\n    $categoryIdIn: [Int]\n    $q: String\n    $first: Int\n  ) {\n    products(\n      first: $first\n      where: {\n        stockStatus: $stockStatus\n        orderby: $orderBy\n        categoryIdIn: $categoryIdIn\n        search: $q\n      }\n    ) {\n      pageInfo {\n        total\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        __typename\n        ... on VariableProduct {\n          databaseId\n          name\n          onSale\n          type\n          averageRating\n          slug\n          image {\n            sourceUrl\n          }\n          price\n          regularPrice\n          salePrice\n          stockStatus\n        }\n      }\n    }\n  }\n": types.GetAllProductsDocument,
-    "\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"homepage\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n": types.GetHomePageSlidersDocument,
+    "\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"MAIN_HOMEPAGE_SLIDERS\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n": types.GetHomePageSlidersDocument,
+    "\n  query GetTopBanner {\n    sliderCategories(where: { slug: \"TOP_BANNER\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n": types.GetTopBannerDocument,
 };
 
 /**
@@ -63,7 +64,11 @@ export function graphql(source: "\n  query GetAllProducts(\n    $stockStatus: [S
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"homepage\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"homepage\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"MAIN_HOMEPAGE_SLIDERS\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetHomePageSliders {\n    sliderCategories(where: { slug: \"MAIN_HOMEPAGE_SLIDERS\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query GetTopBanner {\n    sliderCategories(where: { slug: \"TOP_BANNER\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetTopBanner {\n    sliderCategories(where: { slug: \"TOP_BANNER\" }) {\n      nodes {\n        sliders {\n          edges {\n            node {\n              id: databaseId\n              title\n              url\n              featuredImage {\n                node {\n                  id: databaseId\n                  url: sourceUrl\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};