khollise/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: add tabs navigation

Browse source
This commit is contained in:
Nathan Lamy 2025-08-19 12:46:23 +02:00
parent 7067256a9f
commit 26cc3bf4bb
3 changed files with 37 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/home/bottom-nav.tsx
View file

@ -18,7 +18,7 @@ const navigationMenuItems = [
export default function BottomNavigation({ activeId }: { activeId: string }) {
return (
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50">
<div className="flex items-center justify-center">
<NavigationMenu>
<NavigationMenuList>

2
app/components/home/date-picker.tsx
View file

@ -33,7 +33,7 @@ export default function DatePickerWithRange({
<button
id="date"
className={
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 " +
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50 " +
cn(
"w-full justify-start text-left font-normal",
!startDate && "text-muted-foreground"

79
app/components/home/index.tsx
View file

@ -32,6 +32,9 @@ import { useSearchParams } from "react-router";
import { useColles } from "~/lib/api";
import TabContent from "~/components/home/tab-content";
const tabsStyle =
"rounded-none bg-background data-[state=active]:bg-background! h-full data-[state=active]:shadow-none border-b-2 border-transparent border-t-0 border-r-0 border-l-0 data-[state=active]:border-primary!";
export default function Home() {
// Handle query parameters
const [query, setQuery] = useSearchParams();
@ -119,64 +122,52 @@ export default function Home() {
return (
<div className="space-y-6 pb-20 md:pb-0">
{/* Tabs */}
<Tabs
defaultValue="all"
value={activeTab}
onValueChange={setActiveTab}
className="max-w-md w-full"
>
<TabsList className="w-full p-0 bg-background justify-start border-b rounded-none">
<TabsTrigger value="you" className={tabsStyle}>
<User className="h-4 w-4" />
Vous
</TabsTrigger>
<TabsTrigger value="favorites" className={tabsStyle}>
<Star className="h-4 w-4" />
Favoris
</TabsTrigger>
<TabsTrigger value="class" className={tabsStyle}>
<Users className="h-4 w-4" />
Classe
</TabsTrigger>
</TabsList>
</Tabs>
{/* Week Navigation */}
<div className="mb-4">
<div className="flex flex-row items-center justify-between gap-4">
<div className="mb-0">
<div className="flex flex-row items-center justify-between gap-2">
<Button variant="outline" size="sm" onClick={handlePreviousWeek}>
<ChevronLeft className="h-10 w-10" />
</Button>
<div className="flex-1">
<DatePickerWithRange
startDate={startDate}
setStartDate={setStartDate}
/>
</div>
<div className="flex items-center space-x-2">
<Button variant="outline" size="sm" onClick={handlePreviousWeek}>
<ChevronLeft className="h-4 w-4" />
</Button>
<Button variant="outline" size="sm" onClick={handleNextWeek}>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
<Button variant="outline" size="sm" onClick={handleNextWeek}>
<ChevronRight className="h-10 w-10" />
</Button>
</div>
</div>
<Tabs
defaultValue="all"
value={activeTab}
onValueChange={setActiveTab}
className="hidden md:block"
>
<div className="mb-4">
<TabsList className="w-full">
<TabsTrigger
value="you"
className="flex-1 flex items-center justify-center gap-1"
>
<User className="h-4 w-4" />
Vos colles ({studentColles.length})
</TabsTrigger>
<TabsTrigger
value="favorites"
className="flex-1 flex items-center justify-center gap-1"
>
<Star className="h-4 w-4" />
Vos favoris ({0 /* TODO: stars.length */})
</TabsTrigger>
<TabsTrigger
value="class"
className="flex-1 flex items-center justify-center gap-1"
>
<Users className="h-4 w-4" />
Votre classe ({classColles.length})
</TabsTrigger>
</TabsList>
</div>
</Tabs>
{/* TODO: Filter component */}
<Collapsible open={isFilterOpen} onOpenChange={setIsFilterOpen}>
<div className="flex justify-between">
<div className="flex gap-2">
{activeTab === "all" && (
{activeTab === "class" && (
<>
<Button
variant="outline"