Opportunity Card A visually polished and responsive card component to display project opportunities or job offers, complete with user details, project specifications, and action buttons. It's designed to be easily populated with dynamic data.
import { OpportunityCard, OpportunityCardProps } from '@/components/ui/card-12';
const Demo = () => {
// Sample data to populate the card
const opportunityData: Omit<OpportunityCardProps, 'onAccept' | 'onDecline'> = {
status: 'Available',
postedBy: {
name: 'Jenifer A.',
avatarUrl: 'https://i.pravatar.cc/150?u=jenifer',
company: 'Meta — Facebook',
location: 'California',
},
salaryRange: {
min: 35000,
max: 45000,
},
deadline: '14 Oct - 2024',
matchPercentage: 89.5,
rating: 4.9,
tags: ['Web Design'],
description: 'Need Responsive Website showcase product. Modern and visually appealing design.',
recruiter: {
name: 'Robert T.',
avatarUrl: 'https://i.pravatar.cc/150?u=robert',
company: 'Full Cycle Agency',
location: 'Salt Lake',
},
};
// Handler functions for the buttons
const handleAccept = () => {
console.log('Project Accepted!');
// Add your accept logic here
};
const handleDecline = () => {
console.log('Offer Declined.');
// Add your decline logic here
};
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<OpportunityCard
{...opportunityData}
onAccept={handleAccept}
onDecline={handleDecline}
/>
</div>
);
};
export default Demo;