WIP: Updated card styles and grid layout

mzohaibqc · Jan 13, 2024 · 716ed19 · 716ed19
1 parent 324a7dc
commit 716ed19
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 32 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :root {
-  --background: #FBFBFB;
+  --background: #ffffff;
   --soft-grey: #DFDFDF;
   --grey: #445964;
   --dark-grey: #263138;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import type { Metadata } from 'next';
-import { Roboto } from 'next/font/google';
+import { Urbanist } from 'next/font/google';
 import Header from '@/components/Header';
 import { CartProvider } from '@/store';
 
 import './globals.css';
 
-const roboto = Roboto({
+const font = Urbanist({
   weight: ['400', '500'],
   subsets: ['latin'],
 });
@@ -22,7 +22,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={roboto.className}>
+      <body className={font.className}>
         <Header />
         <main className="min-h-screen max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-16">
           <CartProvider>{children}</CartProvider>

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -8,7 +8,7 @@ export default function Button({ className, children, ...rest }: Props) {
   return (
     <button
       className={classNames(
-        'w-8 h-8 rounded-md flex items-center justify-center cursor-pointer disabled:cursor-not-allowed text-lg hover:bg-gray-100 hover:border hover:border-gray-300',
+        'w-6 h-6 rounded-md flex items-center justify-center cursor-pointer disabled:cursor-not-allowed text-lg hover:bg-gray-100 hover:border hover:border-gray-300',
         className
       )}
       {...rest}

diff --git a/src/components/Color/index.tsx b/src/components/Color/index.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 type Props = React.ComponentPropsWithoutRef<'div'> & {
   color: string;
 };
@@ -6,7 +8,10 @@ export default function Color({ color, ...rest }: Props) {
   return (
     <div
       {...rest}
-      className="w-6 h-6 rounded-md bg-white shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
+      className={classNames(
+        'w-6 h-6 rounded-md bg-white shadow-[0_8px_30px_rgb(0,0,0,0.12)]',
+        rest.className
+      )}
       style={{ backgroundColor: colorMap[color] || color }}
     >
       <span className="sr-only color-value">{color}</span>

diff --git a/src/components/ProductItem/index.tsx b/src/components/ProductItem/index.tsx
@@ -37,41 +37,87 @@ export default function ProductItem({ product, className }: Props) {
   );
   const disabled = useMemo(() => count === 0, [count]);
   return (
-    <div className={className} data-testid={`product-${product.id}`}>
-      <div className="flex flex-col sm:flex-row rounded-md overflow-hidden bg-white p-2 shadow-[0_8px_30px_rgb(0,0,0,0.12)]">
-        <div className="img relative w-full h-[380px] sm:w-[150px] sm:h-[220px]">
+    <div
+      className={classNames(className, 'flex flex-col')}
+      data-testid={`product-${product.id}`}
+    >
+      <div className="flex-1 flex flex-col rounded-md overflow-hidden bg-white shadow-[0_8px_30px_rgb(0,0,0,0.12)]">
+        <div className="img relative w-full h-80">
           <Image
             fill
             priority
             src={product.img}
             alt="Product Image"
-            className="rounded-md"
+            className="rounded-t-md"
             data-testid={`product-${product.id}-img`}
-            style={{ objectFit: 'cover', objectPosition: '50% 30%' }}
+            style={{ objectFit: 'cover', objectPosition: '50% 20%' }}
           />
         </div>
-        <div className="info flex-1 px-2 sm:px-4 py-2 flex flex-col">
-          <div className="flex justify-between">
-            <h2 className="text-xl font-semibold">{product.name}</h2>
-          </div>
+        <div className="info flex-1 p-3 flex flex-col">
+          <h2
+            className="text-xl font-semibold mb-3 line-clamp-2"
+            title={product.name}
+            aria-label={product.name}
+          >
+            {product.name}
+          </h2>
 
-          <div className="flex-1 flex flex-col items-center sm:items-end justify-end gap-3">
+          <div className="flex justify-between items-center gap-3 mb-3">
+            <div className="flex gap-3">
+              <Color
+                color={product.colour}
+                data-testid={`product-${product.id}-color`}
+              />
+              <p className="text-xl text-gray-500 font-medium">
+                &pound;
+                <span data-testid={`product-${product.id}-price`}>
+                  {product.price.toFixed(2)}
+                </span>
+              </p>
+            </div>
+            <button
+              className="group px-3 text-gray-500"
+              onClick={handleClearItem}
+              disabled={disabled}
+              data-testid={`product-${product.id}-clear`}
+            >
+              <span className="group-focus:underline group-hover:underline">
+                Remove
+              </span>
+            </button>
+          </div>
+          <div className="w-full border border-gray-200 px-2 py-1 rounded-md sm:max-w-xs flex justify-around items-center">
+            <Button
+              onClick={handleRemoveItem}
+              disabled={disabled}
+              className={classNames('text-lg icon-btn')}
+              aria-label="Remove One Item"
+              data-testid={`product-${product.id}-remove`}
+            >
+              <Minus />
+            </Button>
+            <span
+              data-testid={`product-${product.id}-count`}
+              className="text-md text-gray-500 px-5  border rounded-md text-center"
+            >
+              {count}
+            </span>
+            <Button
+              onClick={handleAddItem}
+              className="text-lg icon-btn"
+              aria-label="Add One Item"
+              data-testid={`product-${product.id}-add`}
+            >
+              <Add />
+            </Button>
+          </div>
+          {/* <div className="flex-1 flex flex-col items-center sm:items-end justify-end gap-3">
             <div className="flex justify-between items-center w-full sm:max-w-xs mt-6">
               <div className="flex items-center space-x-3">
                 <p className="text-lg font-medium">Color:</p>
-                <Color
-                  color={product.colour}
-                  data-testid={`product-${product.id}-color`}
-                />
               </div>
               <div className="flex items-center space-x-3">
                 <p className="text-lg font-medium">Price:</p>
-                <p className="text-xl font-medium">
-                  &pound;
-                  <span data-testid={`product-${product.id}-price`}>
-                    {product.price.toFixed(2)}
-                  </span>
-                </p>
               </div>
             </div>
             <div className="w-full border border-gray-200 px-2 py-1 rounded-md sm:max-w-xs flex justify-around items-center">
@@ -107,7 +153,7 @@ export default function ProductItem({ product, className }: Props) {
             >
               Remove all Items
             </button>
-          </div>
+          </div> */}
         </div>
       </div>
     </div>

diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
@@ -4,7 +4,10 @@ type Props = { products: Product[] };
 
 export default function ProductList({ products }: Props) {
   return (
-    <div data-testid="products-list" className="grid grid-cols-1 gap-4 flex-1">
+    <div
+      data-testid="products-list"
+      className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 flex-1"
+    >
       {products.map((product) => (
         <ProductItem key={product.id} product={product} />
       ))}

diff --git a/src/components/Products/index.tsx b/src/components/Products/index.tsx
@@ -9,18 +9,17 @@ export default function Products() {
   const colorOptions = products.map((product) => product.colour);
   return (
     <>
-      <div className="py-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <h1 className="text-3xl font-semibold">Products</h1>
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <h1 className="text-3xl font-medium">Products</h1>
         <ColorFilter
           colorOptions={colorOptions}
           color={color}
           onChange={setColor}
           className="w-full sm:max-w-xs"
         />
       </div>
-      <div className="flex flex-col lg:flex-row gap-4 pb-6">
+      <div className="flex flex-col lg:flex-row gap-4 py-6">
         <ProductList products={filteredProducts} />
-        <Cart />
       </div>
     </>
   );