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

import { User } from '@/types';
import { Link } from '@inertiajs/react';
import { PropsWithChildren } from 'react';
import { ChevronLeft, ChevronRight, Folder, FolderMinus } from 'react-feather';

export default function PinnedProjectDetails({ user }: PropsWithChildren<{ user: User }>) {
    const thisUser = user;

    const renderIfEndUser = () => {
        if (thisUser.role_id===3) {
            return (
                <div className='mt-auto'>
                    <div className='w-full flex flwx-row justify-evenly m-0 mt-2'>
                        <div className="btn btn-link text-secondary-main p-0"><Folder size={20} />View project details</div>
                        <div className="btn btn-link text-error-main p-0"><FolderMinus size={20} />Unpin project</div>
                    </div>
                </div>
            );
        }
    }

    return (
        <div className='flex flex-col'>
            <div className="navbar m-0 p-0">
                <div className="navbar-start"><Link href=""><ChevronLeft size={20} /></Link></div>
                <div className="navbar-center"><Link href=""><span className="font-semibold text-lg">Project Name</span></Link></div>
                <div className="navbar-end"><Link href=""><ChevronRight size={20} /></Link></div>
            </div>
            <article className="flex flex-row justify-center">
                <section className="w-3/4 bg-neutral-10 shadow-md mr-4 p-4 border rounded-lg">
                    <p className="text-sm text-justify"><b>Description:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula augue tellus, nec tempus diam tristique ut.</p>
                    <div className="flex">
                        <p className="text-sm w-1/2"><b>Project created at:</b><br />Month / Day / Year hh:mm</p>
                        <p className="text-sm"><b>Project updated at:</b><br />Month / Day / Year hh:mm</p>
                    </div>
                    <div className="flex">
                        <p className="text-sm w-1/2"><b>PL Framework:</b> PL version</p>
                        <p className="text-sm"><b>Status:</b> Active</p>
                    </div>
                    <div className="divider text-md font-bold">Frequently Referred Pages</div>
                    <table className="table w-full">
                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href="">
                            <td className='text-sm leading-4 py-2 w-1/2'>Page Title</td>
                            <td className='text-sm leading-4 py-2 w-1/3'>Subject</td>
                            <td className='text-sm leading-4 py-2 w-auto'>Notes</td>
                        </Link></tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href="">
                            <td className='text-sm leading-4 py-2 w-1/2'>Page Title</td>
                            <td className='text-sm leading-4 py-2 w-1/3'>Subject</td>
                            <td className='text-sm leading-4 py-2 w-auto'>Notes</td>
                        </Link></tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href="">
                            <td className='text-sm leading-4 py-2 w-1/2'>Page Title</td>
                            <td className='text-sm leading-4 py-2 w-1/3'>Subject</td>
                            <td className='text-sm leading-4 py-2 w-auto'>Notes</td>
                        </Link></tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href="">
                            <td className='text-sm leading-4 py-2 w-1/2'>Page Title</td>
                            <td className='text-sm leading-4 py-2 w-1/3'>Subject</td>
                            <td className='text-sm leading-4 py-2 w-auto'>Notes</td>
                        </Link></tr>
                        <tr className="hover:cursor-pointer hover:bg-secondary-background active:bg-primary-main active:text-white"><Link href="">
                            <td className='text-sm leading-4 py-2 w-1/2'>Page Title</td>
                            <td className='text-sm leading-4 py-2 w-1/3'>Subject</td>
                            <td className='text-sm leading-4 py-2 w-auto'>Notes</td>
                        </Link></tr>
                    </table>
                </section>
                
                <aside className="w-1/4 bg-neutral-10 shadow-md p-4 border rounded-lg flex flex-col">
                    <p className="text-sm text-center font-semibold divider m-0">Latest Activities</p>
                    <table className="table mt-2">
                        <tbody>
                            <tr>
                                <td className='text-md leading-4 py-2 w-full'>
                                    <span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br />
                                    User pinned Page Title
                                </td>
                            </tr>
                            <tr>
                                <td className='text-md leading-4 py-2 w-full'>
                                    <span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br />
                                    Team Leader pinned Page Title
                                </td>
                            </tr>
                            <tr>
                                <td className='text-md leading-4 py-2 w-full'>
                                    <span className="text-xs"><i>Month / Day / Year hh:mm:ss</i></span><br />
                                    Team Leader added User as Role
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div className="btn btn-link text-secondary-main p-0 mt-auto mb-0">View all interactions</div>
                </aside>
            </article>

            {renderIfEndUser()}
        </div>
    );
}