feat: 🎸 added the list component fixes #5

[aghimohamad]

added all the cards and the list component that renders them

Related Issue

• Resolve #5

Render

Desktop :

Mobile :

copy and paste this code in the index.js file to see the components:

the imports:

import Layout from "@/components/layout/Layout";
import List from "@/components/LandingList";
import Partners from "@/components/Partners";

the testing data:

export const blogs = [
  {
    title: "My Blog",
    date: "01/01/2015",
    description : "This is my blog",
},
{
  title: "My Blog",
  date: "01/01/2015",
  description : "This is my blog",
},
{
  title: "My Blog",
  date: "01/01/2015",
  description : "This is my blog",
},
{
  title: "My Blog",
  date: "01/01/2015",
  description : "This is my blog",
}
]

export const items = [
  {
    title: "My item",
    description : "This is my item",
    location : "istanbul",
    category: "item",
    user : "user1",
},
  {
    title: "My item",
    description : "This is my item",
    location : "istanbul",
    category: "item",
    user : "user1",
},
  {
    title: "My item",
    description : "This is my item",
    location : "istanbul",
    category: "item",
    user : "user1",
},
  {
    title: "My item",
    description : "This is my item",
    category: "item",
    location : "istanbul",
    user : "user1",
},
]

export const categories = [
  { 
    id: 1,
    name: "category",
    description: "This is my category",
  },
  { 
    id: 2,
    name: "category",
    description: "This is my category",
  },
  { 
    id: 3,
    name: "category",
    description: "This is my category",
  },
  { 
    id: 4,
    name: "category",
    description: "This is my category",
  },
]

Rendering the components:

            <List items={items} />
            <hr className="my-8 container mx-auto px-4"></hr>
            <List blogs={blogs} />
            <hr className="my-8 container mx-auto px-4"></hr>
            <Partners />
            <hr className="my-8 container mx-auto px-4"></hr>
            <List categories={categories} />