ActiveAssesmentCardjsx

import React from 'react'
import { ArrowRight } from 'lucide-react'
import { Badge } from './ui/badge'
import { Button } from './ui/button'

const Component = () => {
    return (
        <div className='text-sm'>
            <h2 className='text-nowrap'>Active Assesments</h2>
            <h1 className='font-bold text-sm'>12</h1>
        </div>
    )
}


const ActiveAssesmentCard = () => {
    return (
        <div className='border p-4 gap-4 border-gray-200 flex justify-between items-center max-xl:flex-wrap'>
            <h2 className='font-semibold text-nowrap max-xl:w-full'>UI UX Designer</h2>
            <div className='flex gap-2 items-center justify-between w-full xl:ps-8 flex-wrap'>
                <div className='flex items-center gap-4 flex-wrap'>
                    <Component />
                    <Component />
                    <Component />
                    <Component />
                </div>
                <Badge className="text-nowrap bg-[#0369A1]/10 text-[#0369A1] capitalize">ends {new Date().toJSON().slice(0, 10)}</Badge>
                <Button
                    size="icon"
                    variant="outline"
                >
                    <ArrowRight />
                </Button>
            </div>
        </div>
    )
}

export default ActiveAssesmentCard