Components
Loading preview...
Here is Course Design Cards component
npx shadcn@latest add https://21st.dev/r/kristen17/course-design-cardsimport React from 'react';
import Card from '@/components/ui/course-design-cards';
import '@/index.css';
const DefaultDemo: React.FC = () => {
const cardData = [
{
id: 1,
colorClass: 'green',
date: 'Feb 2, 2021',
title: 'web designing',
description: 'Prototyping',
progressPercent: '90%',
progressValue: '90%',
imgSrc1: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt1: 'User 1',
imgSrc2: 'https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt2: 'User 2',
countdownText: '2 days left',
},
{
id: 2,
colorClass: 'orange',
date: 'Feb 05, 2021',
title: 'mobile app',
description: 'Shopping',
progressPercent: '30%',
progressValue: '30%',
imgSrc1: 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt1: 'User 3',
imgSrc2: 'https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt2: 'User 4',
countdownText: '3 weeks left',
},
{
id: 3,
colorClass: 'red',
date: 'March 03, 2021',
title: 'dashboard',
description: 'Medical',
progressPercent: '50%',
progressValue: '50%',
imgSrc1: 'https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt1: 'User 5',
imgSrc2: 'https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt2: 'User 6',
countdownText: '3 weeks left',
},
{
id: 4,
colorClass: 'blue',
date: 'March 08, 2021',
title: 'web designing',
description: 'Wireframing',
progressPercent: '20%',
progressValue: '20%',
imgSrc1: 'https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt1: 'Erik Longman',
imgSrc2: 'https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
imgAlt2: 'Jane Doe',
countdownText: '3 weeks left',
},
];
return (
<section>
{cardData.map((card) => (
<Card key={card.id} data={card} />
))}
</section>
);
};
export default DefaultDemo;