add category pages

seelentov · Mar 8, 2024 · b5bec0e · b5bec0e
1 parent 0170280
commit b5bec0e
Show file tree

Hide file tree

Showing 33 changed files with 554 additions and 92 deletions.
diff --git a/public/laptop-2.png b/public/laptop-2.png
diff --git a/src/app/[category]/[service]/page.tsx b/src/app/[category]/[service]/page.tsx
@@ -0,0 +1,11 @@
+
+interface ICategoryPage {
+  params: { service: string }
+}
+
+
+export default async function Service({ params }: ICategoryPage) {
+  return (
+    <p>{params.service}</p>
+  );
+}
diff --git a/src/app/[category]/page.module.scss b/src/app/[category]/page.module.scss
diff --git a/src/app/[category]/page.tsx b/src/app/[category]/page.tsx
@@ -0,0 +1,38 @@
+import { Listing } from '@/components/Listing/Listing';
+import { getItemByFilter, getItemsByFilter } from '@/core/api/getItemsByFilter';
+import { notFound } from 'next/navigation';
+
+interface ICategoryPage {
+  params: { category: string }
+}
+
+
+export default async function Category({ params }: ICategoryPage) {
+
+  const category: ICategory = await getItemByFilter('categories', ['href'], params.category)
+
+  if (!category) {
+    notFound();
+  }
+
+  const services: IService[] = await getItemsByFilter('services', ['category', 'href'], params.category, [
+    ['populate', 'desktopExample'],
+    ['populate', 'mobileExample']
+  ])
+
+  const serializedServices: IService[] = services.map(item => {
+    return { ...item, href: `/${params.category}/${item.href}` }
+  })
+
+  return (
+    <>
+      <div className='container content'>
+        <h1>{category.header}</h1>
+        <Listing data={serializedServices} />
+        <br />
+        <br />
+        <div dangerouslySetInnerHTML={{__html: category.description}}></div>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -0,0 +1,7 @@
+
+
+export default async function About() {
+  return (
+    <p>asdasdas</p>
+  );
+}
diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx
@@ -0,0 +1,6 @@
+
+export default async function Catalog() {
+  return (
+    <p>CAtalog</p>
+  );
+}
diff --git a/src/app/contacts/page.tsx b/src/app/contacts/page.tsx
@@ -0,0 +1,6 @@
+
+export default async function Contacts() {
+  return (
+    <p>CAtalog</p>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,33 +3,29 @@ import { Catalog } from "@/components/Catalog/Catalog";
 import { FAQ } from "@/components/FAQ/FAQ";
 import { Stages } from "@/components/Stages/Stages";
 import { baseFetch } from "@/core/api/baseFetch";
+import { getSerializedServices } from "@/core/api/getSerializedServices";
+import { parseObjToQuerytsts } from "@/core/utils/api/parseObjToQuery";
 
 export default async function HomePage() {
 
-  const bannerData = await baseFetch('/api/banners/?populate=image')
+  const bannerData = await baseFetch(`/api/banners/?${parseObjToQuerytsts([
+    ['populate', 'image']
+  ])}`)
   const faqData = await baseFetch('/api/questions')
   const stagesData = await baseFetch('/api/stages')
 
-  const mobileDevData = await baseFetch('/api/services?filters[section]=mobile&populate=icon')
-  const webDevData = await baseFetch('/api/services?filters[section]=web&populate=icon')
-  const servicesData = await baseFetch('/api/services?filters[section]=service&populate=icon')
-
-  const catalogSerializedData = {
-    'Разработка cайтов': webDevData,
-    'Разработка приложений': mobileDevData,
-    'Услуги': servicesData
-  }
+  const categoriesData = await getSerializedServices()
 
   return (
     <>
       {bannerData && <Banner data={bannerData} />}
       <hr className="hr" />
-      {catalogSerializedData &&<Catalog header={'Каталог услуг'} data={catalogSerializedData} />}
+      {categoriesData && <Catalog header={'Каталог услуг'} data={categoriesData} />}
       <hr className="hr" />
-      {stagesData &&<Stages data={stagesData} header={'Как оформить заказ?'} />}
+      {stagesData && <Stages data={stagesData} header={'Как оформить заказ?'} />}
       <hr className="hr" />
       <hr className="hr" />
-      {faqData &&<FAQ header={'Частые вопросы'} data={faqData} />}
+      {faqData && <FAQ header={'Частые вопросы'} data={faqData} />}
       <hr className="hr" />
     </>
   );

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
@@ -0,0 +1,6 @@
+
+export default async function Portfolio() {
+  return (
+    <p>CAtalog</p>
+  );
+}
diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
@@ -50,6 +50,12 @@
 .itemText {
   width: 50%;
 
+  h2 {
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   p {
     max-height: 130px;
     height: 130px;

diff --git a/src/components/Banner/BannerItem.tsx b/src/components/Banner/BannerItem.tsx
@@ -64,7 +64,7 @@ const BannerItemPreview: FC<IBannerItemPreviewProps> = ({ image, header, type, p
           onMouseEnter={() => setIsAutoScroll(false)}
         >
           <Image src={image} alt={header}
-          priority
+            priority
             width={0}
             height={0}
             sizes="100vw"
@@ -73,7 +73,7 @@ const BannerItemPreview: FC<IBannerItemPreviewProps> = ({ image, header, type, p
         </div>
 
         <Image src={`/mobile.png`} alt={header}
-        priority
+          priority
           className={styles.itemImageDeviceMobile}
           width={0}
           height={0}
@@ -100,15 +100,15 @@ const BannerItemPreview: FC<IBannerItemPreviewProps> = ({ image, header, type, p
             onMouseEnter={() => setIsAutoScroll(false)}
           >
             <Image src={image} alt={header}
-            priority
+              priority
               width={0}
               height={0}
               sizes="100vw"
               style={{ width: '100%', height: 'auto' }}
             />
           </div>
-          <Image src={`/laptop.png`} alt={header}
-          priority
+          <Image src={`/laptop-2.png`} alt={header}
+            priority
             className={styles.itemImageLaptop}
             width={0}
             height={0}
@@ -126,16 +126,16 @@ const BannerItemPreview: FC<IBannerItemPreviewProps> = ({ image, header, type, p
                 onMouseEnter={() => setIsAutoScroll(false)}
               >
                 <Image src={image} alt={header}
-                priority
+                  priority
                   width={0}
                   height={0}
                   sizes="100vw"
                   style={{ width: '100%', height: 'auto' }}
                 />
               </div>
 
-              <Image src={`/laptop.png`} alt={header}
-              priority
+              <Image src={`/laptop-2.png`} alt={header}
+                priority
                 className={styles.itemImageDeviceMobileLaptop}
                 width={0}
                 height={0}
@@ -155,16 +155,16 @@ const BannerItemPreview: FC<IBannerItemPreviewProps> = ({ image, header, type, p
                 onMouseEnter={() => setIsAutoScroll(false)}
               >
                 <Image src={image} alt={header}
-                priority
+                  priority
                   width={0}
                   height={0}
                   sizes="100vw"
                   style={{ width: '100%', height: 'auto' }}
                 />
               </div>
 
-              <Image src={`/laptop.png`} alt={header}
-              priority
+              <Image src={`/laptop-2.png`} alt={header}
+                priority
                 className={styles.itemImageDeviceMobileLaptop}
                 width={0}
                 height={0}

diff --git a/src/components/Catalog/Catalog.tsx b/src/components/Catalog/Catalog.tsx
@@ -10,13 +10,14 @@ import { CatalogTab } from './CatalogTab/CatalogTab';
 export interface ICatalogProps {
   data: { [key: string]: ICatalogItem[] }
   header: string
+  startTab?: number
 }
 
-export const Catalog: FC<ICatalogProps> = ({ header, data }) => {
+export const Catalog: FC<ICatalogProps> = ({ header, data, startTab = 1 }) => {
 
   const keys = Object.keys(data)
 
-  const [currentTabName, setCurrentTabName] = useState<string>(keys[0])
+  const [currentTabName, setCurrentTabName] = useState<string>(keys[startTab - 1])
   const [currentData, setCurrentData] = useState<ICatalogItem[]>(data[keys[0]])
 
 
@@ -37,21 +38,21 @@ export const Catalog: FC<ICatalogProps> = ({ header, data }) => {
               <span></span>
             </div>
             <ul className={styles.tabs}>
-              {keys?.map((tabName, index) => <li 
-              key={index} 
-              className={cn(styles.tab, tabName === currentTabName && styles.active)}
-              onClick={()=>switchTab(tabName)}>
+              {keys?.map((tabName, index) => <li
+                key={index}
+                className={cn(styles.tab, tabName === currentTabName && styles.active)}
+                onClick={() => switchTab(tabName)}>
                 {tabName}
-                </li>)}
+              </li>)}
             </ul>
           </div>
           <div className={styles.tabName}>
             <h3>
-              {"https://"+currentTabName.replace(' ', '_')}
+              {"https://" + currentTabName.replace(' ', '_')}
             </h3>
           </div>
           <div className={styles.items}>
-            <CatalogTab data={currentData}/>
+            <CatalogTab data={currentData} />
           </div>
         </div>
       </div>

diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
@@ -6,7 +6,7 @@ import { BrowserView } from "react-device-detect";
 import styles from './Header.module.scss';
 
 
-export const DesktopNav = () => {
+export const DesktopNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => {
 
   return (
     <BrowserView>
@@ -17,16 +17,16 @@ export const DesktopNav = () => {
             <a href="/">Главная</a>
           </li>
 
-          {ROUTING.menuLinks.map(({ id, href: mainHref, name, sublist }) =>
+          {serviceLinks.concat(ROUTING.menuLinks).map(({ id, href: mainHref, name, sublist }) =>
             <li key={id} className={styles.navDesktopListItem}>
-              <Link href={mainHref}>{name}</Link>
+              <Link href={`/${mainHref}`}>{name}</Link>
               {
                 sublist &&
                 <ul className={styles.navDesktopSubList}>
                   {
                     sublist?.map(({ id, href, name }) =>
                       <li className={styles.navDesktopSubListItem} key={id}>
-                        <Link href={`${mainHref}/${href}`}>{name}</Link>
+                        <Link href={`/${mainHref}/${href}`}>{name}</Link>
                       </li>
                     )
                   }

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -4,20 +4,24 @@ import { RiPhoneFill, RiTelegramFill, RiWhatsappFill } from "react-icons/ri";
 import { DesktopNav } from './DesktopNav';
 import styles from './Header.module.scss';
 import { MobileNav } from './MobileNav';
+import { getServiceLinks } from '@/core/api/getServiceLinks';
 
 export interface IHeaderProps {
 
 }
 
-export const Header: FC<IHeaderProps> = () => {
+export const Header: FC<IHeaderProps> = async () => {
+
+
+  const serviceLinks = await getServiceLinks()
 
   return (
     <header className={styles.main}>
       <div className="container">
         <div className={styles.wrapper}>
           <div className={styles.nav}>
-            <DesktopNav />
-            <MobileNav />
+            <DesktopNav serviceLinks={serviceLinks}/>
+            <MobileNav serviceLinks={serviceLinks}/>
           </div>
           <div className={styles.social}>
             <a className={styles.socialItem} href={`tel:${INFO.PHONE}`}>

diff --git a/src/components/Header/MobileNav.tsx b/src/components/Header/MobileNav.tsx
@@ -25,12 +25,14 @@ type NavItems = {
   links: MenuLinkParent[]
 }
 
-const defaultNavItems = {
-  title: 'Pixel Perfect',
-  links: ROUTING.menuLinks
-}
 
-export const MobileNav = () => {
+
+export const MobileNav = ({serviceLinks}:{serviceLinks: MenuLink[]}) => {
+
+  const defaultNavItems = {
+    title: 'Pixel Perfect',
+    links: serviceLinks.concat(ROUTING.menuLinks)
+  }
 
   const [isOpen, setOpen] = useState<string | null>(null)
   const isOpenBoolean = isOpen === 'navMobileMenuOpening' || isOpen === 'navMobileMenuOpen'

diff --git a/src/components/Listing/Listing.module.scss b/src/components/Listing/Listing.module.scss
@@ -0,0 +1,4 @@
+.main{
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/src/components/Listing/Listing.tsx b/src/components/Listing/Listing.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import styles from './Listing.module.scss';
+import { ListingItem } from './ListingItem/ListingItem';
+
+export interface IListingProps {
+  data: IService[]
+}
+
+export const Listing: FC<IListingProps> = ({ data }) => {
+  return (
+    <div className={styles.main}>
+      {data.map(item => <ListingItem key={item.id} {...{ ...item }} width={100/data.length}/>)}
+    </div>
+  );
+}