'use client'; import * as React from 'react'; import { RiArrowDownSFill, RiArrowDownSLine, RiArrowUpSFill, RiDatabase2Line, RiExpandUpDownFill, RiFilter3Fill, RiMacbookLine, RiMore2Line, RiPenNibLine, RiPieChartLine, RiSearch2Line, RiShieldCheckLine, RiShiningLine, RiSortDesc, RiStarFill, RiStarHalfFill, RiStarLine, RiUser3Line, } from '@remixicon/react'; import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef, type SortingState, } from '@tanstack/react-table'; import * as Avatar from './components/ui/avatar'; import * as Badge from './components/ui/badge'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as Input from './components/ui/input'; import * as Kbd from './components/ui/kbd'; import * as SegmentedControl from './components/ui/segmented-control'; import * as Table from './components/ui/table'; function IconCmd(props: React.SVGProps) { return ( ); } function SVGStarFill(props: React.SVGProps) { return ; } function SVGStarHalf(props: React.SVGProps) { return ; } function SVGStarLine(props: React.SVGProps) { return ; } function StarRating({ rating }: { rating: number }) { const getStarIcon = (i: number) => { if (rating >= i + 1) { return ; } else if (rating >= i + 0.5) { return ; } return ; }; return (

{Array.from({ length: 5 }, (_, i) => getStarIcon(i))}

); } type CourseData = { id: string; courseName: string; courseIcon?: React.ReactNode; categories: { name: string; color: | 'blue' | 'purple' | 'green' | 'yellow' | 'orange' | 'red' | 'pink' | 'gray' | 'sky' | 'teal'; additionalCount?: number; }[]; duration: string; instructor: { name: string; avatar: string; }; rating: number; additionalCount?: number; }; const data: CourseData[] = [ { id: '1', courseName: 'Leadership Skills', courseIcon: , categories: [ { name: 'Team', color: 'blue', additionalCount: 4 }, { name: 'Communication', color: 'purple', additionalCount: 4 }, ], duration: '3 weeks', instructor: { name: 'Horizon Shift', avatar: 'https://alignui.com/images/logo/horizon.svg', }, rating: 4.5, }, { id: '2', courseName: 'Data Science Fundamentals', courseIcon: , categories: [ { name: 'Data', color: 'orange' }, { name: 'Analytics', color: 'red', additionalCount: 2 }, ], duration: '6 weeks', instructor: { name: 'Orandis', avatar: 'https://alignui.com/images/logo/orandis.svg', }, rating: 4, }, { id: '3', courseName: 'Web Development Basics', courseIcon: , categories: [ { name: 'Programming', color: 'pink' }, { name: 'Wen', color: 'blue', additionalCount: 2 }, ], duration: '8 weeks', instructor: { name: 'Phoenix', avatar: 'https://alignui.com/images/logo/phoenix.svg', }, rating: 5, }, { id: '4', courseName: 'Digital Marketing', courseIcon: , categories: [ { name: 'Marketing', color: 'green' }, { name: 'Social Media', color: 'purple', additionalCount: 2 }, ], duration: '2 weeks', instructor: { name: 'Catalyst', avatar: 'https://alignui.com/images/logo/catalyst.svg', }, rating: 3, }, { id: '5', courseName: 'Graphic Design Mastery', courseIcon: , categories: [ { name: 'Design', color: 'yellow' }, { name: 'Creativity', color: 'green', additionalCount: 4 }, ], duration: '12 weeks', instructor: { name: 'Aurora', avatar: 'https://alignui.com/images/logo/aurora.svg', }, rating: 4.5, }, { id: '6', courseName: 'Cybersecurity Basics', courseIcon: , categories: [ { name: 'Security', color: 'sky' }, { name: 'Programming', color: 'pink' }, { name: 'IT', color: 'purple' }, ], duration: '4 weeks', instructor: { name: 'Orandis', avatar: 'https://alignui.com/images/logo/orandis.svg', }, rating: 4, }, { id: '7', courseName: 'Artificial Intelligence', courseIcon: , categories: [ { name: 'AI', color: 'purple' }, { name: 'Machine Learning', color: 'orange', additionalCount: 4 }, ], duration: '6 weeks', instructor: { name: 'Apex', avatar: 'https://alignui.com/images/logo/apex.svg', }, rating: 5, }, ]; const getCategoryBadges = ( categories: { name: string; color: | 'blue' | 'purple' | 'green' | 'yellow' | 'orange' | 'red' | 'pink' | 'gray' | 'sky' | 'teal'; additionalCount?: number; }[], ) => { // Get the additionalCount from first category with this property const additionalCount = categories.find( (cat) => cat.additionalCount !== undefined, )?.additionalCount; return (

{categories.map((category, index) => ( {category.name} ))} {additionalCount && ( +{additionalCount} )}

); }; const getSortingIcon = (state: 'asc' | 'desc' | false) => { if (state === 'asc') return ; if (state === 'desc') return ; return ; }; export default function CourseTable() { const [sorting, setSorting] = React.useState([]); const [filter, setFilter] = React.useState('all'); const [rowSelection, setRowSelection] = React.useState({}); const filteredData = React.useMemo(() => { if (filter === 'all') return data; if (filter === 'in-progress') { return data.filter((course) => course.rating < 5); } if (filter === 'completed') { return data.filter((course) => course.rating === 5); } return data; }, [filter]); const columns: ColumnDef[] = [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' /> ), }, { id: 'courseName', accessorKey: 'courseName', header: ({ column }) => (

Course Name

), cell: ({ row }) => (

{row.original.courseIcon}

{row.original.courseName}

), }, { id: 'instructor', accessorKey: 'instructor.name', header: ({ column }) => (

Instructor

), cell: ({ row }) => (

{row.original.instructor.name}

), }, { id: 'category', accessorKey: 'categories', header: ({ column }) => (