91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { StudentDashboardProps } from '@/types/page';
|
|
import { router, usePage } from '@inertiajs/react';
|
|
import { LayoutDashboard, LogOut, LucideProps } from 'lucide-react';
|
|
|
|
interface TabListsProps {
|
|
tabs: {
|
|
id: string;
|
|
name: string;
|
|
slug: string;
|
|
Icon: React.ForwardRefExoticComponent<Omit<LucideProps, 'ref'> & React.RefAttributes<SVGSVGElement>>;
|
|
}[];
|
|
}
|
|
|
|
const TabLists = ({ tabs }: TabListsProps) => {
|
|
const { props } = usePage<StudentDashboardProps>();
|
|
const { auth, system, instructor, translate } = props;
|
|
const { button, common } = translate;
|
|
|
|
return (
|
|
<div className="w-[230px]">
|
|
<div className="mb-6 flex flex-col items-center">
|
|
<div className="h-[120px] w-[120px] overflow-hidden rounded-full">
|
|
<img
|
|
alt={`${auth.user.name}'s profile`}
|
|
src={auth.user.photo || '/assets/icons/avatar.png'}
|
|
className="h-full w-full content-center object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<h6 className="mt-8 mb-1 font-bold">{auth.user.name}</h6>
|
|
|
|
<p className="text-muted-foreground text-sm">{auth.user.email}</p>
|
|
</div>
|
|
|
|
{instructor && instructor.status === 'approved' && (
|
|
<Button
|
|
variant="ghost"
|
|
className="text-muted-foreground h-11 w-full justify-start gap-3 rounded-none px-5 py-3 text-start"
|
|
onClick={() => router.get(route('dashboard'))}
|
|
>
|
|
<LayoutDashboard className="h-4 w-4" />
|
|
<span>{common.dashboard}</span>
|
|
</Button>
|
|
)}
|
|
|
|
<TabsList className="grid h-auto grid-cols-1 gap-2 bg-transparent p-0">
|
|
{tabs.map(({ id, name, slug, Icon }) => (
|
|
<TabsTrigger
|
|
key={id}
|
|
value={slug}
|
|
className="hover:bg-secondary hover:text-secondary-foreground data-[state=active]:!bg-muted data-[state=active]:!text-secondary-foreground relative flex h-10 cursor-pointer items-center justify-start gap-3 rounded-md px-4 text-start"
|
|
onClick={() => router.get(route('student.index', { tab: slug }))}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{name}</span>
|
|
</TabsTrigger>
|
|
))}
|
|
|
|
<Button
|
|
variant="secondary"
|
|
className="bg-background text-primary hover:text-secondary-foreground h-10 w-full justify-start gap-3 rounded-md px-4"
|
|
onClick={() => router.post(route('logout'))}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
<span>{button.logout}</span>
|
|
</Button>
|
|
</TabsList>
|
|
|
|
{((system.sub_type === 'collaborative' && !instructor) || (instructor && instructor.status !== 'approved')) && (
|
|
<Button
|
|
variant="outline"
|
|
className="hover:bg-background border-secondary-light mt-7 w-full"
|
|
onClick={() =>
|
|
router.get(
|
|
route('student.index', {
|
|
tab: 'instructor',
|
|
}),
|
|
)
|
|
}
|
|
>
|
|
{button.become_instructor}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TabLists;
|