refactor: ♻️ replace SectionTitle component in main page sections

SteveCoder96 · Aug 24, 2022 · a635956 · a635956
1 parent fe70a3e
commit a635956
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 21 deletions.
diff --git a/components/banners/index.tsx b/components/banners/index.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import BannerBox from "./banner-box/BannerBox";
 import { bannerContent } from "../../mock/banner";
-import { useLanguage } from "../../hooks/useLanguage";
+import SectionTitle from "../UI/SectionTitle";
 
 const Banner = () => {
-  const { t } = useLanguage();
   return (
-    <div className="flex items-center flex-col w-full xl:max-w-[2100px] mx-auto">
-      <h2 className="my-4 text-2xl md:text-3xl">{t.specialSale}</h2>
-      <div className="grid gap-4 grid-cols-6 lg:grid-cols-12 mt-4 md:mt-8 mb-8 sm:mb-16">
+    <div className="flex items-center flex-col w-full xl:max-w-[2100px] my-4 md:my-8 mx-auto">
+      <SectionTitle title={"specialSale"} />
+      <div className="grid gap-4 grid-cols-6 lg:grid-cols-12">
         {bannerContent.map(
           ({
             title,

diff --git a/components/brands/index.tsx b/components/brands/index.tsx
@@ -2,10 +2,8 @@ import React from "react";
 import BrandBox from "./BrandBox";
 import { brandContent } from "../../mock/brand";
 import Slider from "react-slick";
-import { NextArrow, PrevArrow } from "../UI/CarouselBox/CarouselBoxArrows";
-import { useLanguage } from "../../hooks/useLanguage";
+import SectionTitle from "../UI/SectionTitle";
 const Brands = () => {
-  const { t } = useLanguage();
   const settings = {
     infinite: true,
     speed: 6000,
@@ -40,10 +38,8 @@ const Brands = () => {
     ],
   };
   return (
-    <div className="p-1 text-center">
-      <h2 className="mx-auto text-2xl md:text-3xl my-4 md:mt-8 mb-8">
-        {t.popularBrands}
-      </h2>
+    <div className="p-1 my-4 md:my-8 text-center">
+      <SectionTitle title={"popularBrands"} />
       <Slider {...settings}>
         {brandContent.map((brandItem) => {
           return (

diff --git a/components/category/Category.tsx b/components/category/Category.tsx
@@ -1,17 +1,14 @@
 import React from "react";
-import { useLanguage } from "../../hooks/useLanguage";
 import { categorySmContent } from "../../mock/category-sm";
 import CategorySmBox from "./CategorySmBox";
 import { categoryLgContent } from "../../mock/category-lg";
 import CategoryLgBox from "./CategoryLgBox";
+import SectionTitle from "../UI/SectionTitle";
 
 const Category = () => {
-  const { t } = useLanguage();
   return (
-    <div className="my-4 lg:my-10 flex flex-col items-center">
-      <h2 className="mx-auto mt-4 py-8 text-2xl md:text-3xl">
-        {t.CategoryOfGoods}
-      </h2>
+    <div className="flex flex-col items-center my-4 md:my-8">
+      <SectionTitle title={"CategoryOfGoods"} />
 
       {/* 📱 sm and md break point */}
       <div className="flex flex-wrap justify-around items-center lg:hidden">

diff --git a/components/newest/Newest.tsx b/components/newest/Newest.tsx
@@ -5,6 +5,7 @@ import { useWindowDimensions } from "../../hooks/useWindowDimensions";
 import Link from "next/link";
 import Card from "../UI/card/Card";
 import { IProduct } from "../../lib/types/products";
+import SectionTitle from "../UI/SectionTitle";
 
 const Newest = () => {
   const { t } = useLanguage();
@@ -16,8 +17,8 @@ const Newest = () => {
   );
 
   return (
-    <div className="my-4 mx-auto lg:mb-8 lg:mt-16 flex flex-col xl:max-w-[2130px]">
-      <h2 className="my-4 mx-auto text-2xl md:text-3xl">{t.newest}</h2>
+    <div className="mx-auto my-4 md:my-8 flex flex-col xl:max-w-[2130px]">
+      <SectionTitle title={"newest"} />
 
       <div className="grid gap-4 md:gap-2 grid-cols-6 md:grid-cols-12 ">
         {newestProducts
@@ -31,7 +32,7 @@ const Newest = () => {
 
       <div className="text-center">
         <Link href="/newestProducts">
-          <a className="inline-block py-3 px-8 md:px-12 my-4 text-sm md:text-base bg-palette-primary text-palette-side rounded-xl shadow-lg">
+          <a className="inline-block py-3 px-8 md:px-12 mt-4 text-sm md:text-base bg-palette-primary text-palette-side rounded-xl shadow-lg">
             {t.seeAllNewProducts}
           </a>
         </Link>