import React from "react" import { Link, Link2Icon } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Card, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" export const projects = [ { name: "Interactive Quiz App", description: "Create a quiz application using HTML, CSS, and JavaScript. Users can answer multiple-choice questions and get instant feedback on their scores.", language: ["HTML", "CSS", "JavaScript"], difficulty: "Beginner", }, { name: "To-Do List Web App", description: "Build a to-do list web application that allows users to add, edit, and delete tasks. Use HTML, CSS, and JavaScript to make it interactive.", language: ["HTML", "CSS", "JavaScript"], difficulty: "Beginner", }, { name: "Weather Forecast App", description: "Create a web app that fetches weather data from an API and displays it to users based on their location. Use HTML, CSS, and JavaScript.", language: ["HTML", "CSS", "JavaScript"], difficulty: "Intermediate", }, { name: "Portfolio Website", description: "Design and build your personal portfolio website to showcase your projects and skills using HTML, CSS, and JavaScript.", language: ["HTML", "CSS", "JavaScript"], difficulty: "Beginner", }, { name: "Calculator App", description: "Build a basic calculator application using HTML, CSS, and JavaScript. Users can perform arithmetic operations.", language: ["HTML", "CSS", "JavaScript"], difficulty: "Beginner", }, ] const card_01 = () => { return (

{projects.map(({ name, description, language, difficulty }) => (

{difficulty}

{name} {description} {/*

Card Content

*/}

{language.map((each) => ( {each} ))}

))}

) } export default card_01

Tailwind CSS Card - Frontendchef

The Card component can be used to show a list of items on your page ,like product,list