codehub_/resources/js/Components/DashboardComponents/SystemAnnouncement.tsx

import { Link } from '@inertiajs/react';

export default function Announcement() {
    const stdClassNames = "w-full my-1 btn rounded-none text-md font-normal justify-start text-left border-none bg-neutral-10 shadow-none hover:bg-secondary-background hover:border-none active:bg-primary-main active:border-none active:text-white";

    return (
        <div className="h-full w-full px-2 flex flex-col">
            <p className="font-semibold text-md">System Announcement</p>
            <table className="table">
                <tbody>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Page Title has been added to Subject Category
                        </Link></td>
                    </tr>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md text-justify leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Page Title has been modified.
                        </Link></td>
                    </tr>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md text-justify leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Page Title has been deleted.
                        </Link></td>
                    </tr>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Page Title has been archived.
                        </Link></td>
                    </tr>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Subject Category has been added.
                        </Link></td>
                    </tr>
                    <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white">
                        <td className='text-md leading-4 py-2'><Link href=''>
                            <span className='text-xs'><i>Month / Date / Year hh:mm</i></span><br />
                            Software Framework details has been modified.
                        </Link></td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}