components/work.tsx

interface WorkProps {
    jobTitle: string
    projectName: string
    dateFrom: string
    dateTo: string
    children: React.ReactNode
    obsolete: boolean
    area: string
}

export default function Work(props: WorkProps) {
    return (
        <div>
          <div className="grid-cols-3 grid-rows-1 w-full text-base grid">
            <h1 className="text-left"><strong>{props.jobTitle}</strong></h1>    
            <div className="flex justify-center text-center items-center gap-2">
                <h1 className="text-base">{props.projectName}</h1>
                <p className="w-fit bg-green-300 border border-green-700 text-xs rounded-lg px-1 text-center justify-center">{props.area}</p>
                {
                    props.obsolete ?
                    <div className="bg-red-300 border border-red-700 text-xs rounded-lg px-1">Obsolete</div>
                    : null
                }
            </div>
            <h1 className="text-right">{props.dateFrom} - {props.dateTo}</h1>
          </div>
          <ul className="ml-8 mt-2 list-disc text-sm">
            {props.children}
          </ul>
        </div>
    )
}