Update styles for product list

FormidableLabs · Sep 16, 2022 · eba78c1 · eba78c1
1 parent 98a5bae
commit eba78c1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 33 deletions.
diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -5,8 +5,8 @@ import { Image } from "./Image";
 
 interface Props {
   title: string;
-  price: string | number;
-  children: React.ReactNode;
+  price?: string | number;
+  subTitle?: string;
   to: string;
   className?: string;
   imageProps: {
@@ -15,13 +15,14 @@ interface Props {
   };
 }
 
-export const Card: React.FC<Props> = ({ to, children, title, price, imageProps, className = "" }) => {
+export const Card: React.FC<Props> = ({ to, subTitle, title, price, imageProps, className = "" }) => {
   return (
     <Link href={to}>
       <a className={`flex flex-col justify-center text-blue ${className}`}>
         <Image className="rounded-2xl" width={400} height={400} src={imageProps.src} alt={imageProps.alt} />
         <h2 className="text-h6 mt-4 mb-1">{title}</h2>
-        <span className="text-eyebrow font-bold">${price}</span>
+        {price && <span className="text-eyebrow font-bold">${price}</span>}
+        {subTitle && <span className="text-eyebrow">{subTitle}</span>}
       </a>
     </Link>
   );

diff --git a/packages/nextjs/components/CategoryList.tsx b/packages/nextjs/components/CategoryList.tsx
@@ -18,9 +18,8 @@ export const CategoryList = ({ items }: CategoryListProps) => {
               src: category.images?.[0]?.images ?? "",
               alt: category.images?.[0]?.name ?? "",
             }}
-          >
-            {category.name}
-          </Card>
+            title={category.name ?? ""}
+          />
         </li>
       ))}
     </ul>

diff --git a/packages/nextjs/components/ProductList.tsx b/packages/nextjs/components/ProductList.tsx
@@ -9,18 +9,20 @@ export const ProductList = ({ items }: Props) => {
   if (!items) return null;
 
   return (
-    <ul className="flex justify-evenly flex-wrap">
-      {items.map((product) => (
-        <li key={product._id}>
+    <ul className="grid grid-cols-3 m-9">
+      {items.map((product, i) => (
+        <li key={product._id} className="border-r-2 border-r-blue last:border-r-0 flex justify-center">
           <Card
+            key={product._id}
             to={`/products/${product.slug?.current}`}
+            title={product.name ?? ""}
+            price={product.variants?.[0]?.price ?? ""}
+            className="w-[430px]"
             imageProps={{
               src: product.variants?.[0]?.images?.[0]?.images ?? "",
               alt: product.variants?.[0]?.images?.[0]?.name ?? "",
             }}
-          >
-            {product.name}
-          </Card>
+          />
         </li>
       ))}
     </ul>

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -6,7 +6,7 @@ import { setCachingHeaders } from "utils/setCachingHeaders";
 import { SanityType } from "utils/consts";
 import { Button } from "components/Button";
 import { FiArrowRight } from "react-icons/fi";
-import { Card } from "components/Card";
+import { ProductList } from "components/ProductList";
 
 const Home: NextPage = () => {
   const [{ data }] = useGetProductsAndCategoriesQuery();
@@ -25,25 +25,7 @@ const Home: NextPage = () => {
 
       <h4 className="text-h4 text-blue border-y border-y-blue px-9 py-6">Our bestsellers</h4>
 
-      <div className="flex justify-between m-9">
-        {data?.allProduct.map((product, i) => (
-          <>
-            <Card
-              key={product._id}
-              to={`/products/${product.slug?.current}`}
-              title={product.name ?? ""}
-              price={product.variants?.[0]?.price ?? ""}
-              imageProps={{
-                src: product.variants?.[0]?.images?.[0]?.images ?? "",
-                alt: product.variants?.[0]?.images?.[0]?.name ?? "",
-              }}
-            >
-              <h1>{product.name}</h1>
-            </Card>
-            {i !== data.allProduct.length - 1 && <span className="border-r border-r-blue" />}
-          </>
-        ))}
-      </div>
+      <ProductList items={data?.allProduct} />
       <div className="m-9">
         <Button variant="primary" className="w-full">
           Show all breads