Add render profducts

package.json

@@ -10,6 +10,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
     "path": "^0.12.7",
     "react": "^19.0.0",

src/components/sumiya/index.js

@@ -2,4 +2,5 @@ export * from './counter';
 export * from './grade-calculator';
 export * from './number-comparator';
 export * from './multiplication-table';
-export * from './number-table-1-10'
+export * from './number-table-1-10';
+export * from './render-products'

src/components/sumiya/render-products/App.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import useData from './useData';
+
+
+export function App() {
+  const {loading, error, products} = useData()
+
+  const columns = products.length > 0 ? Object.keys(products[0]).filter((key) => key !== 'image') : [];
+
+
+   return (
+    <>
+     <div className=" flex items-center p-6 text-xl ">
+      {products && 
+        <table className='min-w-full bg-white shadow-lg rounded-lg'>
+        <thead className='bg-gray-200 px-6 py-3 text-left text-xl font-bold capitalize'>
+          {columns.map((column)=><th className='px-4 py-2'>{column}</th>)}
+        </thead>
+        <tbody>
+          {products.map((product)=>(
+           <tr key={product.name} className='hover:bg-gray-100 transition-colors'>
+            {columns.map((column)=>(<td className='px-4 py-2 border border-gray-200 capitalize '>{product[column]}</td>))}
+           </tr>
+             ))
+            }
+        </tbody>
+    </table>
+    }
+     </div>
+     <div>
+     {  loading == true && <div className='flex items-center justify-center text-xl '>Loading....</div> }
+     {error && <p>Error Fetching Data</p>}
+     </div> 
+     </>
+   );
+ }

src/components/sumiya/render-products/useData.jsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+function useData() {
+    const url = 'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json';
+    const [products, setProducts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        const fetchData = async ()=>{
+          setLoading(true);
+          try{
+            const response = await fetch(url)
+            const data = await response.json()
+            setProducts(data)
+          }catch(error){
+            setError(error)
+          }finally{
+            setLoading(false)
+          }
+        }
+        fetchData()
+    }, [])
+
+    return {loading, products, error}
+
+}
+
+
+
+
+
+
+
+
+
+export default useData

src/data/index.js

@@ -25,35 +25,25 @@ export const projects = [
     description: 'A simple grade calculator app.',
     contributors: ['thanwin', 'promi', 'sumiya'],
   },
+
   {
     id: 'multiplication-table',
     name: 'Multiplication Table',
     description: 'A simple multiplication table app.',
-    contributors: [, 'sumiya'],
-  },
-  {
-    id: 'multiplication-table',
-    name: 'Multiplication Table',
-    description: 'A simple multiplication table app.',
-    contributors: ['talha'],
+    contributors: ['talha', 'sumiya'],
   },
   {
     id: 'number-table-1-10',
     name: 'Number Table of 1-10',
     description: 'A simple Number Table render app.',
     contributors: ['sumiya'],
   },
-  {
-    id: 'number-table-1-10',
-    name: 'Number Table of 1-10',
-    description: 'A simple Number Table render app.',
-    contributors: ['sumiya'],
-},
+
   {
     id: 'render-products',
     name: 'Render Products',
     description: 'A simple product rendering app using useEffect hook.',
-    contributors: ['bongoDev', 'thanwin', 'promi'],
+    contributors: ['bongoDev', 'thanwin', 'promi', 'sumiya'],
   },
   {
     id: 'simple-ecommerce',

src/pages/sumiya/SumiyaProjectPage.jsx

@@ -6,6 +6,7 @@ import { ThemeProvider as NumberComparatorTheme } from '../../components/sumiya/
 import { GradeCalculator } from '../../components/sumiya/grade-calculator/gradeCalculator';
 import MultiplicationTable from '../../components/sumiya/multiplication-table/MultiplicationTable';
 import {App as NumberTable} from '../../components/sumiya/number-table-1-10/App';
+import { App as RenderProducts } from '../../components/sumiya/render-products/App';
 
 
 export const SumiyaProjectPage = () => {
@@ -30,7 +31,8 @@ export const SumiyaProjectPage = () => {
 
     ),
     'multiplication-table': <MultiplicationTable/>,
-    'number-table-1-10' : <NumberTable/>
+    'number-table-1-10' : <NumberTable/>,
+    'render-products': <RenderProducts/>
 
 
   };