biome lint applied
This commit is contained in:
BeauTroll
70
biome.json
70
biome.json
@@ -1,37 +1,37 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
"useIgnoreFile": true
|
||||
},
|
||||
"files": {
|
||||
"includes": ["src/**/*.ts", "src/**/*.tsx"],
|
||||
"ignoreUnknown": false
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "tab"
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"quoteStyle": "single",
|
||||
"semicolons": "always",
|
||||
"trailingCommas": "all"
|
||||
}
|
||||
},
|
||||
"assist": {
|
||||
"enabled": true,
|
||||
"actions": {
|
||||
"source": {
|
||||
"organizeImports": "on"
|
||||
}
|
||||
}
|
||||
}
|
||||
"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
"useIgnoreFile": true
|
||||
},
|
||||
"files": {
|
||||
"includes": ["src/**/*.ts", "src/**/*.tsx"],
|
||||
"ignoreUnknown": false
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "tab"
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"quoteStyle": "single",
|
||||
"semicolons": "always",
|
||||
"trailingCommas": "all"
|
||||
}
|
||||
},
|
||||
"assist": {
|
||||
"enabled": true,
|
||||
"actions": {
|
||||
"source": {
|
||||
"organizeImports": "on"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,8 +57,8 @@ Draft
|
||||
|
||||
- [ ] Task 5: Configure linting and formatting (AC: 5)
|
||||
- [x] Install Biome (as specified in tech stack, not ESLint+Prettier)
|
||||
- [ ] Create `biome.json` with recommended rules
|
||||
- [ ] Add lint and format scripts to `package.json`
|
||||
- [x] Create `biome.json` with recommended rules
|
||||
- [x] Add lint and format scripts to `package.json`
|
||||
- [ ] Verify linting works on project files
|
||||
|
||||
- [ ] Task 6: Setup Gitea Actions workflow (AC: 6)
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { Link } from '@tanstack/react-router';
|
||||
|
||||
import './Header.css'
|
||||
import './Header.css';
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="header">
|
||||
<nav className="nav">
|
||||
<div className="nav-item">
|
||||
<Link to="/">Home</Link>
|
||||
</div>
|
||||
return (
|
||||
<header className="header">
|
||||
<nav className="nav">
|
||||
<div className="nav-item">
|
||||
<Link to="/">Home</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/server-funcs">Start - Server Functions</Link>
|
||||
</div>
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/server-funcs">Start - Server Functions</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/api-request">Start - API Request</Link>
|
||||
</div>
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/api-request">Start - API Request</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/ssr">Start - SSR Demos</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/start/ssr">Start - SSR Demos</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,437 +1,437 @@
|
||||
import * as React from "react";
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ArrowUpDown,
|
||||
} from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
ArrowUpDown,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Plus,
|
||||
Search,
|
||||
} from 'lucide-react';
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible';
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// Sample data
|
||||
const characters = [
|
||||
{
|
||||
id: 1,
|
||||
nom: "Krosmaster",
|
||||
classe: "Cra",
|
||||
niveau: 200,
|
||||
serveur: "Imagiro",
|
||||
compte: "Compte1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nom: "TankMaster",
|
||||
classe: "Iop",
|
||||
niveau: 200,
|
||||
serveur: "Imagiro",
|
||||
compte: "Compte1",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nom: "MoneyMaker",
|
||||
classe: "Enu",
|
||||
niveau: 200,
|
||||
serveur: "Imagiro",
|
||||
compte: "Compte2",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nom: "HealBot",
|
||||
classe: "Eni",
|
||||
niveau: 195,
|
||||
serveur: "Tylezia",
|
||||
compte: "Compte2",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nom: "ShadowKill",
|
||||
classe: "Sram",
|
||||
niveau: 200,
|
||||
serveur: "Draconiros",
|
||||
compte: "Compte3",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nom: "TimeWarp",
|
||||
classe: "Elio",
|
||||
niveau: 180,
|
||||
serveur: "Imagiro",
|
||||
compte: "Compte1",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nom: "ArrowStorm",
|
||||
classe: "Cra",
|
||||
niveau: 200,
|
||||
serveur: "Tylezia",
|
||||
compte: "Compte4",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nom: "BerserkerX",
|
||||
classe: "Iop",
|
||||
niveau: 175,
|
||||
serveur: "Draconiros",
|
||||
compte: "Compte3",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nom: 'Krosmaster',
|
||||
classe: 'Cra',
|
||||
niveau: 200,
|
||||
serveur: 'Imagiro',
|
||||
compte: 'Compte1',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nom: 'TankMaster',
|
||||
classe: 'Iop',
|
||||
niveau: 200,
|
||||
serveur: 'Imagiro',
|
||||
compte: 'Compte1',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nom: 'MoneyMaker',
|
||||
classe: 'Enu',
|
||||
niveau: 200,
|
||||
serveur: 'Imagiro',
|
||||
compte: 'Compte2',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nom: 'HealBot',
|
||||
classe: 'Eni',
|
||||
niveau: 195,
|
||||
serveur: 'Tylezia',
|
||||
compte: 'Compte2',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nom: 'ShadowKill',
|
||||
classe: 'Sram',
|
||||
niveau: 200,
|
||||
serveur: 'Draconiros',
|
||||
compte: 'Compte3',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nom: 'TimeWarp',
|
||||
classe: 'Elio',
|
||||
niveau: 180,
|
||||
serveur: 'Imagiro',
|
||||
compte: 'Compte1',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nom: 'ArrowStorm',
|
||||
classe: 'Cra',
|
||||
niveau: 200,
|
||||
serveur: 'Tylezia',
|
||||
compte: 'Compte4',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nom: 'BerserkerX',
|
||||
classe: 'Iop',
|
||||
niveau: 175,
|
||||
serveur: 'Draconiros',
|
||||
compte: 'Compte3',
|
||||
},
|
||||
];
|
||||
|
||||
const classes = [
|
||||
{ name: "Cra", count: 12 },
|
||||
{ name: "Iop", count: 8 },
|
||||
{ name: "Enu", count: 6 },
|
||||
{ name: "Eni", count: 5 },
|
||||
{ name: "Elio", count: 4 },
|
||||
{ name: "Sram", count: 6 },
|
||||
{ name: 'Cra', count: 12 },
|
||||
{ name: 'Iop', count: 8 },
|
||||
{ name: 'Enu', count: 6 },
|
||||
{ name: 'Eni', count: 5 },
|
||||
{ name: 'Elio', count: 4 },
|
||||
{ name: 'Sram', count: 6 },
|
||||
];
|
||||
|
||||
const serveurs = ["Imagiro", "Tylezia", "Draconiros"];
|
||||
const serveurs = ['Imagiro', 'Tylezia', 'Draconiros'];
|
||||
|
||||
export function CharacterList() {
|
||||
const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
|
||||
const [classeOpen, setClasseOpen] = React.useState(true);
|
||||
const [serveurOpen, setServeurOpen] = React.useState(true);
|
||||
const [progressionOpen, setProgressionOpen] = React.useState(true);
|
||||
const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
|
||||
const [classeOpen, setClasseOpen] = React.useState(true);
|
||||
const [serveurOpen, setServeurOpen] = React.useState(true);
|
||||
const [progressionOpen, setProgressionOpen] = React.useState(true);
|
||||
|
||||
const toggleSelect = (id: number) => {
|
||||
setSelectedIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
|
||||
);
|
||||
};
|
||||
const toggleSelect = (id: number) => {
|
||||
setSelectedIds((prev) =>
|
||||
prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
|
||||
);
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.length === characters.length) {
|
||||
setSelectedIds([]);
|
||||
} else {
|
||||
setSelectedIds(characters.map((c) => c.id));
|
||||
}
|
||||
};
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.length === characters.length) {
|
||||
setSelectedIds([]);
|
||||
} else {
|
||||
setSelectedIds(characters.map((c) => c.id));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Filter Sidebar */}
|
||||
<aside className="w-[250px] border-r border-[#334155] bg-[#1E293B] p-4 sticky top-0 h-screen overflow-y-auto">
|
||||
<h2 className="text-[#F8FAFC] font-semibold text-lg mb-6">Filtres</h2>
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Filter Sidebar */}
|
||||
<aside className="w-[250px] border-r border-[#334155] bg-[#1E293B] p-4 sticky top-0 h-screen overflow-y-auto">
|
||||
<h2 className="text-[#F8FAFC] font-semibold text-lg mb-6">Filtres</h2>
|
||||
|
||||
{/* Classe Section */}
|
||||
<Collapsible open={classeOpen} onOpenChange={setClasseOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Classe
|
||||
</span>
|
||||
{classeOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-2 mb-6">
|
||||
{classes.map((classe) => (
|
||||
<label
|
||||
key={classe.name}
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
>
|
||||
<Checkbox className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]" />
|
||||
<span className="text-[#F8FAFC] text-sm group-hover:text-[#60A5FA] transition-colors">
|
||||
{classe.name}
|
||||
</span>
|
||||
<span className="text-[#64748B] text-sm ml-auto">
|
||||
({classe.count})
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
{/* Classe Section */}
|
||||
<Collapsible open={classeOpen} onOpenChange={setClasseOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Classe
|
||||
</span>
|
||||
{classeOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-2 mb-6">
|
||||
{classes.map((classe) => (
|
||||
<label
|
||||
key={classe.name}
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
>
|
||||
<Checkbox className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]" />
|
||||
<span className="text-[#F8FAFC] text-sm group-hover:text-[#60A5FA] transition-colors">
|
||||
{classe.name}
|
||||
</span>
|
||||
<span className="text-[#64748B] text-sm ml-auto">
|
||||
({classe.count})
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* Serveur Section */}
|
||||
<Collapsible open={serveurOpen} onOpenChange={setServeurOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Serveur
|
||||
</span>
|
||||
{serveurOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-2 mb-6">
|
||||
{serveurs.map((serveur) => (
|
||||
<label
|
||||
key={serveur}
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
>
|
||||
<Checkbox className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]" />
|
||||
<span className="text-[#F8FAFC] text-sm group-hover:text-[#60A5FA] transition-colors">
|
||||
{serveur}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
{/* Serveur Section */}
|
||||
<Collapsible open={serveurOpen} onOpenChange={setServeurOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Serveur
|
||||
</span>
|
||||
{serveurOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-2 mb-6">
|
||||
{serveurs.map((serveur) => (
|
||||
<label
|
||||
key={serveur}
|
||||
className="flex items-center gap-3 cursor-pointer group"
|
||||
>
|
||||
<Checkbox className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]" />
|
||||
<span className="text-[#F8FAFC] text-sm group-hover:text-[#60A5FA] transition-colors">
|
||||
{serveur}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* Progression Section */}
|
||||
<Collapsible open={progressionOpen} onOpenChange={setProgressionOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Progression
|
||||
</span>
|
||||
{progressionOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-4 mb-6">
|
||||
<div>
|
||||
<label className="text-xs text-[#94A3B8] mb-2 block">Type</label>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full bg-[#0F172A] border-[#475569] text-[#F8FAFC] h-9 rounded-[6px]">
|
||||
<SelectValue placeholder="Sélectionner..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#1E293B] border-[#475569]">
|
||||
<SelectItem
|
||||
value="dofus"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Dofus
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="donjons"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Donjons
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="recherches"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Recherchés
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<RadioGroup defaultValue="a-fait" className="gap-2">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<RadioGroupItem
|
||||
value="a-fait"
|
||||
className="border-[#475569] text-[#60A5FA]"
|
||||
/>
|
||||
<span className="text-[#F8FAFC] text-sm">A fait</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<RadioGroupItem
|
||||
value="na-pas-fait"
|
||||
className="border-[#475569] text-[#60A5FA]"
|
||||
/>
|
||||
<span className="text-[#F8FAFC] text-sm">{"N'a pas fait"}</span>
|
||||
</label>
|
||||
</RadioGroup>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
{/* Progression Section */}
|
||||
<Collapsible open={progressionOpen} onOpenChange={setProgressionOpen}>
|
||||
<CollapsibleTrigger className="flex items-center justify-between w-full mb-3">
|
||||
<span className="text-xs uppercase tracking-wider text-[#94A3B8]">
|
||||
Progression
|
||||
</span>
|
||||
{progressionOpen ? (
|
||||
<ChevronUp className="h-4 w-4 text-[#94A3B8]" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-[#94A3B8]" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-4 mb-6">
|
||||
<div>
|
||||
<label className="text-xs text-[#94A3B8] mb-2 block">Type</label>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full bg-[#0F172A] border-[#475569] text-[#F8FAFC] h-9 rounded-[6px]">
|
||||
<SelectValue placeholder="Sélectionner..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#1E293B] border-[#475569]">
|
||||
<SelectItem
|
||||
value="dofus"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Dofus
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="donjons"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Donjons
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="recherches"
|
||||
className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]"
|
||||
>
|
||||
Recherchés
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<RadioGroup defaultValue="a-fait" className="gap-2">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<RadioGroupItem
|
||||
value="a-fait"
|
||||
className="border-[#475569] text-[#60A5FA]"
|
||||
/>
|
||||
<span className="text-[#F8FAFC] text-sm">A fait</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<RadioGroupItem
|
||||
value="na-pas-fait"
|
||||
className="border-[#475569] text-[#60A5FA]"
|
||||
/>
|
||||
<span className="text-[#F8FAFC] text-sm">{"N'a pas fait"}</span>
|
||||
</label>
|
||||
</RadioGroup>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* Reset Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mt-4 border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
Réinitialiser
|
||||
</Button>
|
||||
</aside>
|
||||
{/* Reset Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mt-4 border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
Réinitialiser
|
||||
</Button>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#334155] bg-[#0F172A]">
|
||||
<div className="relative w-72">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#64748B]" />
|
||||
<Input
|
||||
placeholder="Rechercher..."
|
||||
className="pl-10 bg-[#1E293B] border-[#475569] text-[#F8FAFC] placeholder:text-[#64748B] h-9 rounded-[6px]"
|
||||
/>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-[#334155] bg-[#0F172A]">
|
||||
<div className="relative w-72">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#64748B]" />
|
||||
<Input
|
||||
placeholder="Rechercher..."
|
||||
className="pl-10 bg-[#1E293B] border-[#475569] text-[#F8FAFC] placeholder:text-[#64748B] h-9 rounded-[6px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedIds.length > 0 && (
|
||||
<>
|
||||
<span className="text-sm text-[#94A3B8]">
|
||||
{selectedIds.length} sélectionné
|
||||
{selectedIds.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-[#475569] text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
Bulk Actions
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="bg-[#1E293B] border-[#475569]">
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Exporter
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)}
|
||||
<Button className="bg-[#60A5FA] text-[#0F172A] hover:bg-[#3B82F6] rounded-[6px]">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Ajouter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedIds.length > 0 && (
|
||||
<>
|
||||
<span className="text-sm text-[#94A3B8]">
|
||||
{selectedIds.length} sélectionné
|
||||
{selectedIds.length > 1 ? 's' : ''}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-[#475569] text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
Bulk Actions
|
||||
<ChevronDown className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="bg-[#1E293B] border-[#475569]">
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Exporter
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)}
|
||||
<Button className="bg-[#60A5FA] text-[#0F172A] hover:bg-[#3B82F6] rounded-[6px]">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Ajouter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-[#1E293B] z-10">
|
||||
<TableRow className="border-[#334155] hover:bg-[#1E293B]">
|
||||
<TableHead className="w-[40px] text-[#94A3B8]">
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedIds.length === characters.length &&
|
||||
characters.length > 0
|
||||
}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">
|
||||
<button className="flex items-center gap-1 hover:text-[#F8FAFC] transition-colors">
|
||||
Nom
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Classe</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">
|
||||
<button className="flex items-center gap-1 hover:text-[#F8FAFC] transition-colors">
|
||||
Niveau
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Serveur</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Compte</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{characters.map((character) => {
|
||||
const isSelected = selectedIds.includes(character.id);
|
||||
return (
|
||||
<TableRow
|
||||
key={character.id}
|
||||
className={cn(
|
||||
"border-[#334155] h-12 transition-colors",
|
||||
isSelected
|
||||
? "bg-[#1E293B] border-l-2 border-l-[#60A5FA]"
|
||||
: "hover:bg-[#1E293B]/50",
|
||||
)}
|
||||
>
|
||||
<TableCell className="w-[40px]">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleSelect(character.id)}
|
||||
className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC] font-medium">
|
||||
{character.nom}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.classe}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.niveau}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.serveur}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.compte}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader className="sticky top-0 bg-[#1E293B] z-10">
|
||||
<TableRow className="border-[#334155] hover:bg-[#1E293B]">
|
||||
<TableHead className="w-[40px] text-[#94A3B8]">
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedIds.length === characters.length &&
|
||||
characters.length > 0
|
||||
}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">
|
||||
<button className="flex items-center gap-1 hover:text-[#F8FAFC] transition-colors">
|
||||
Nom
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Classe</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">
|
||||
<button className="flex items-center gap-1 hover:text-[#F8FAFC] transition-colors">
|
||||
Niveau
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Serveur</TableHead>
|
||||
<TableHead className="text-[#94A3B8]">Compte</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{characters.map((character) => {
|
||||
const isSelected = selectedIds.includes(character.id);
|
||||
return (
|
||||
<TableRow
|
||||
key={character.id}
|
||||
className={cn(
|
||||
'border-[#334155] h-12 transition-colors',
|
||||
isSelected
|
||||
? 'bg-[#1E293B] border-l-2 border-l-[#60A5FA]'
|
||||
: 'hover:bg-[#1E293B]/50',
|
||||
)}
|
||||
>
|
||||
<TableCell className="w-[40px]">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleSelect(character.id)}
|
||||
className="border-[#475569] data-[state=checked]:bg-[#60A5FA] data-[state=checked]:border-[#60A5FA]"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC] font-medium">
|
||||
{character.nom}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.classe}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.niveau}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.serveur}
|
||||
</TableCell>
|
||||
<TableCell className="text-[#F8FAFC]">
|
||||
{character.compte}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination Footer */}
|
||||
<div className="flex items-center justify-between p-4 border-t border-[#334155] bg-[#0F172A]">
|
||||
<span className="text-sm text-[#94A3B8]">Showing 1-8 of 64</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
{"<"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#60A5FA] bg-[#60A5FA]/10 text-[#60A5FA] hover:bg-[#60A5FA]/20 rounded-[6px]"
|
||||
>
|
||||
1
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
2
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
3
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
{">"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* Pagination Footer */}
|
||||
<div className="flex items-center justify-between p-4 border-t border-[#334155] bg-[#0F172A]">
|
||||
<span className="text-sm text-[#94A3B8]">Showing 1-8 of 64</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
{'<'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#60A5FA] bg-[#60A5FA]/10 text-[#60A5FA] hover:bg-[#60A5FA]/20 rounded-[6px]"
|
||||
>
|
||||
1
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
2
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
3
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-[#475569] text-[#94A3B8] hover:text-[#F8FAFC] hover:bg-[#334155] rounded-[6px] bg-transparent"
|
||||
>
|
||||
{'>'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
interface ConfirmationModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
progressionName: string;
|
||||
incompleteCount: number;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
progressionName: string;
|
||||
incompleteCount: number;
|
||||
}
|
||||
|
||||
export function ConfirmationModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
progressionName,
|
||||
incompleteCount,
|
||||
open,
|
||||
onOpenChange,
|
||||
progressionName,
|
||||
incompleteCount,
|
||||
}: ConfirmationModalProps) {
|
||||
const handleConfirm = () => {
|
||||
// Do NOT implement actual update logic
|
||||
onOpenChange(false);
|
||||
};
|
||||
const handleConfirm = () => {
|
||||
// Do NOT implement actual update logic
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[400px] rounded-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmer la mise à jour</DialogTitle>
|
||||
<DialogDescription>
|
||||
Marquer {progressionName} comme fait pour {incompleteCount}{" "}
|
||||
personnages ?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="rounded-md"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} className="rounded-md">
|
||||
Confirmer
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[400px] rounded-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmer la mise à jour</DialogTitle>
|
||||
<DialogDescription>
|
||||
Marquer {progressionName} comme fait pour {incompleteCount}{' '}
|
||||
personnages ?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="rounded-md"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleConfirm} className="rounded-md">
|
||||
Confirmer
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
import { useLocation } from "@tanstack/react-router";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Moon, Sun, ChevronRight } from "lucide-react";
|
||||
import { useLocation } from '@tanstack/react-router';
|
||||
import { ChevronRight, Moon, Sun } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const routeLabels: Record<string, string> = {
|
||||
"/": "Dashboard",
|
||||
"/characters": "Personnages",
|
||||
"/accounts": "Comptes",
|
||||
"/teams": "Teams",
|
||||
"/settings": "Paramètres",
|
||||
'/': 'Dashboard',
|
||||
'/characters': 'Personnages',
|
||||
'/accounts': 'Comptes',
|
||||
'/teams': 'Teams',
|
||||
'/settings': 'Paramètres',
|
||||
};
|
||||
|
||||
interface AppHeaderProps {
|
||||
theme: "dark" | "light";
|
||||
onToggleTheme: () => void;
|
||||
theme: 'dark' | 'light';
|
||||
onToggleTheme: () => void;
|
||||
}
|
||||
|
||||
export function AppHeader({ theme, onToggleTheme }: AppHeaderProps) {
|
||||
const { pathname } = useLocation();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
// Generate breadcrumb from pathname
|
||||
const segments = pathname.split("/").filter(Boolean);
|
||||
const breadcrumbs =
|
||||
segments.length === 0
|
||||
? [{ label: "Dashboard", href: "/" }]
|
||||
: segments.map((segment, index) => {
|
||||
const href = "/" + segments.slice(0, index + 1).join("/");
|
||||
const label =
|
||||
routeLabels[href] ||
|
||||
segment.charAt(0).toUpperCase() + segment.slice(1);
|
||||
return { label, href };
|
||||
});
|
||||
// Generate breadcrumb from pathname
|
||||
const segments = pathname.split('/').filter(Boolean);
|
||||
const breadcrumbs =
|
||||
segments.length === 0
|
||||
? [{ label: 'Dashboard', href: '/' }]
|
||||
: segments.map((segment, index) => {
|
||||
const href = '/' + segments.slice(0, index + 1).join('/');
|
||||
const label =
|
||||
routeLabels[href] ||
|
||||
segment.charAt(0).toUpperCase() + segment.slice(1);
|
||||
return { label, href };
|
||||
});
|
||||
|
||||
return (
|
||||
<header className="flex h-16 items-center justify-between border-b border-border bg-card px-6">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-1 text-sm">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<span key={crumb.href} className="flex items-center gap-1">
|
||||
{index > 0 && (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
index === breadcrumbs.length - 1
|
||||
? "font-medium text-foreground"
|
||||
: "text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{crumb.label}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
return (
|
||||
<header className="flex h-16 items-center justify-between border-b border-border bg-card px-6">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-1 text-sm">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<span key={crumb.href} className="flex items-center gap-1">
|
||||
{index > 0 && (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
index === breadcrumbs.length - 1
|
||||
? 'font-medium text-foreground'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{crumb.label}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggleTheme}
|
||||
className="h-9 w-9"
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<Sun className="h-5 w-5" />
|
||||
) : (
|
||||
<Moon className="h-5 w-5" />
|
||||
)}
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</header>
|
||||
);
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggleTheme}
|
||||
className="h-9 w-9"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<Sun className="h-5 w-5" />
|
||||
) : (
|
||||
<Moon className="h-5 w-5" />
|
||||
)}
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
import type React from "react";
|
||||
import type React from 'react';
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { AppHeader } from "@/components/layout/app-header";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { AppHeader } from '@/components/layout/app-header';
|
||||
import { AppSidebar } from '@/components/layout/app-sidebar';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function AppShell({ children }: AppShellProps) {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [theme, setTheme] = useState<'dark' | 'light'>('dark');
|
||||
|
||||
// Apply theme class to html element
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (theme === "light") {
|
||||
root.classList.add("light");
|
||||
} else {
|
||||
root.classList.remove("light");
|
||||
}
|
||||
}, [theme]);
|
||||
// Apply theme class to html element
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (theme === 'light') {
|
||||
root.classList.add('light');
|
||||
} else {
|
||||
root.classList.remove('light');
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme((prev) => (prev === "dark" ? "light" : "dark"));
|
||||
};
|
||||
const toggleTheme = () => {
|
||||
setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<AppSidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
/>
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<AppSidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
/>
|
||||
|
||||
{/* Main content area */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex min-h-screen flex-col transition-all duration-200",
|
||||
sidebarCollapsed ? "pl-16" : "pl-60",
|
||||
)}
|
||||
>
|
||||
<AppHeader theme={theme} onToggleTheme={toggleTheme} />
|
||||
{/* Main content area */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex min-h-screen flex-col transition-all duration-200',
|
||||
sidebarCollapsed ? 'pl-16' : 'pl-60',
|
||||
)}
|
||||
>
|
||||
<AppHeader theme={theme} onToggleTheme={toggleTheme} />
|
||||
|
||||
{/* Scrollable main content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="mx-auto max-w-[1280px] p-6">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* Scrollable main content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="mx-auto max-w-[1280px] p-6">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
import { Link, useLocation } from "@tanstack/react-router";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link, useLocation } from '@tanstack/react-router';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Folder,
|
||||
Home,
|
||||
Settings,
|
||||
Swords,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Home,
|
||||
Users,
|
||||
Folder,
|
||||
Swords,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const navItems = [
|
||||
{ icon: Home, label: "Dashboard", href: "/" },
|
||||
{ icon: Users, label: "Personnages", href: "/characters" },
|
||||
{ icon: Folder, label: "Comptes", href: "/accounts" },
|
||||
{ icon: Swords, label: "Teams", href: "/teams" },
|
||||
{ icon: Settings, label: "Paramètres", href: "/settings" },
|
||||
{ icon: Home, label: 'Dashboard', href: '/' },
|
||||
{ icon: Users, label: 'Personnages', href: '/characters' },
|
||||
{ icon: Folder, label: 'Comptes', href: '/accounts' },
|
||||
{ icon: Swords, label: 'Teams', href: '/teams' },
|
||||
{ icon: Settings, label: 'Paramètres', href: '/settings' },
|
||||
];
|
||||
|
||||
interface AppSidebarProps {
|
||||
collapsed: boolean;
|
||||
onToggle: () => void;
|
||||
collapsed: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export function AppSidebar({ collapsed, onToggle }: AppSidebarProps) {
|
||||
const { pathname } = useLocation();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed left-0 top-0 z-40 flex h-screen flex-col border-r border-sidebar-border bg-sidebar transition-all duration-200",
|
||||
collapsed ? "w-16" : "w-60",
|
||||
)}
|
||||
>
|
||||
{/* Header with logo and toggle */}
|
||||
<div className="flex h-16 items-center justify-between border-b border-sidebar-border px-3">
|
||||
{!collapsed && (
|
||||
<span className="text-lg font-bold tracking-tight text-sidebar-foreground">
|
||||
DOFUS MANAGER
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggle}
|
||||
className={cn(
|
||||
"h-8 w-8 text-sidebar-foreground hover:bg-sidebar-accent",
|
||||
collapsed && "mx-auto",
|
||||
)}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Toggle sidebar</span>
|
||||
</Button>
|
||||
</div>
|
||||
return (
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed left-0 top-0 z-40 flex h-screen flex-col border-r border-sidebar-border bg-sidebar transition-all duration-200',
|
||||
collapsed ? 'w-16' : 'w-60',
|
||||
)}
|
||||
>
|
||||
{/* Header with logo and toggle */}
|
||||
<div className="flex h-16 items-center justify-between border-b border-sidebar-border px-3">
|
||||
{!collapsed && (
|
||||
<span className="text-lg font-bold tracking-tight text-sidebar-foreground">
|
||||
DOFUS MANAGER
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggle}
|
||||
className={cn(
|
||||
'h-8 w-8 text-sidebar-foreground hover:bg-sidebar-accent',
|
||||
collapsed && 'mx-auto',
|
||||
)}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
)}
|
||||
<span className="sr-only">Toggle sidebar</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 p-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
const Icon = item.icon;
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 space-y-1 p-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
const Icon = item.icon;
|
||||
|
||||
const linkContent = (
|
||||
<Link
|
||||
to={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-sidebar-primary text-sidebar-primary-foreground"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5 shrink-0" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
</Link>
|
||||
);
|
||||
const linkContent = (
|
||||
<Link
|
||||
to={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-sidebar-primary text-sidebar-primary-foreground'
|
||||
: 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5 shrink-0" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
</Link>
|
||||
);
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<Tooltip key={item.href}>
|
||||
<TooltipTrigger asChild>{linkContent}</TooltipTrigger>
|
||||
<TooltipContent side="right" className="font-medium">
|
||||
{item.label}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
if (collapsed) {
|
||||
return (
|
||||
<Tooltip key={item.href}>
|
||||
<TooltipTrigger asChild>{linkContent}</TooltipTrigger>
|
||||
<TooltipContent side="right" className="font-medium">
|
||||
{item.label}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return <div key={item.href}>{linkContent}</div>;
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
</TooltipProvider>
|
||||
);
|
||||
return <div key={item.href}>{linkContent}</div>;
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,273 +1,273 @@
|
||||
import type React from "react";
|
||||
import {
|
||||
FolderOpen,
|
||||
Users,
|
||||
Swords,
|
||||
Coins,
|
||||
BarChart3,
|
||||
Plus,
|
||||
ChevronDown,
|
||||
ArrowRight,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
ChevronDown,
|
||||
Coins,
|
||||
FolderOpen,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Swords,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import type React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
// Custom progress bar with color support
|
||||
function ColoredProgress({
|
||||
value,
|
||||
color,
|
||||
value,
|
||||
color,
|
||||
}: {
|
||||
value: number;
|
||||
color: "success" | "warning" | "info";
|
||||
value: number;
|
||||
color: 'success' | 'warning' | 'info';
|
||||
}) {
|
||||
const colorClasses = {
|
||||
success: "bg-[#4ADE80]",
|
||||
warning: "bg-[#FBBF24]",
|
||||
info: "bg-[#60A5FA]",
|
||||
};
|
||||
const colorClasses = {
|
||||
success: 'bg-[#4ADE80]',
|
||||
warning: 'bg-[#FBBF24]',
|
||||
info: 'bg-[#60A5FA]',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-2 w-full overflow-hidden rounded-full bg-[#334155]">
|
||||
<div
|
||||
className={`h-full transition-all ${colorClasses[color]}`}
|
||||
style={{ width: `${value}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="relative h-2 w-full overflow-hidden rounded-full bg-[#334155]">
|
||||
<div
|
||||
className={`h-full transition-all ${colorClasses[color]}`}
|
||||
style={{ width: `${value}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Stat card component with hover effect
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
mainStat,
|
||||
secondary,
|
||||
linkText,
|
||||
children,
|
||||
className = "",
|
||||
icon: Icon,
|
||||
title,
|
||||
mainStat,
|
||||
secondary,
|
||||
linkText,
|
||||
children,
|
||||
className = '',
|
||||
}: {
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
mainStat?: string;
|
||||
secondary?: React.ReactNode;
|
||||
linkText: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
mainStat?: string;
|
||||
secondary?: React.ReactNode;
|
||||
linkText: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
className={`border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01] ${className}`}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<Icon className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
{title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1">
|
||||
{mainStat && (
|
||||
<p className="text-2xl font-bold text-[#F8FAFC]">{mainStat}</p>
|
||||
)}
|
||||
{secondary && <div className="text-sm text-[#94A3B8]">{secondary}</div>}
|
||||
{children}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
{linkText}
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
className={`border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01] ${className}`}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<Icon className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
{title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1">
|
||||
{mainStat && (
|
||||
<p className="text-2xl font-bold text-[#F8FAFC]">{mainStat}</p>
|
||||
)}
|
||||
{secondary && <div className="text-sm text-[#94A3B8]">{secondary}</div>}
|
||||
{children}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
{linkText}
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function Dashboard() {
|
||||
// Mock data
|
||||
const currencies = [
|
||||
{ name: "Doplons", amount: "12,450" },
|
||||
{ name: "Orichor", amount: "3,200" },
|
||||
{ name: "Kamas glace", amount: "8,100" },
|
||||
{ name: "Nuggets", amount: "2,340" },
|
||||
];
|
||||
// Mock data
|
||||
const currencies = [
|
||||
{ name: 'Doplons', amount: '12,450' },
|
||||
{ name: 'Orichor', amount: '3,200' },
|
||||
{ name: 'Kamas glace', amount: '8,100' },
|
||||
{ name: 'Nuggets', amount: '2,340' },
|
||||
];
|
||||
|
||||
const progressions = [
|
||||
{ label: "Dofus", value: 72, color: "success" as const },
|
||||
{ label: "Donjons", value: 45, color: "warning" as const },
|
||||
{ label: "Recherchés", value: 61, color: "info" as const },
|
||||
];
|
||||
const progressions = [
|
||||
{ label: 'Dofus', value: 72, color: 'success' as const },
|
||||
{ label: 'Donjons', value: 45, color: 'warning' as const },
|
||||
{ label: 'Recherchés', value: 61, color: 'info' as const },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0F172A] p-6">
|
||||
{/* Header */}
|
||||
<header className="mb-8 flex items-center justify-between">
|
||||
<h1 className="text-[32px] font-bold text-[#F8FAFC]">DASHBOARD</h1>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Nouveau
|
||||
<ChevronDown className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="border-[#334155] bg-[#1E293B]">
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Personnage
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Compte
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Team
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0F172A] p-6">
|
||||
{/* Header */}
|
||||
<header className="mb-8 flex items-center justify-between">
|
||||
<h1 className="text-[32px] font-bold text-[#F8FAFC]">DASHBOARD</h1>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Nouveau
|
||||
<ChevronDown className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="border-[#334155] bg-[#1E293B]">
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Personnage
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Compte
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[#F8FAFC] focus:bg-[#334155] focus:text-[#F8FAFC]">
|
||||
Team
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
|
||||
{/* Widget Grid */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{/* Comptes Card */}
|
||||
<StatCard
|
||||
icon={FolderOpen}
|
||||
title="Comptes"
|
||||
mainStat="12 comptes"
|
||||
secondary="45,230 ogrines"
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
{/* Widget Grid */}
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{/* Comptes Card */}
|
||||
<StatCard
|
||||
icon={FolderOpen}
|
||||
title="Comptes"
|
||||
mainStat="12 comptes"
|
||||
secondary="45,230 ogrines"
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
|
||||
{/* Personnages Card */}
|
||||
<StatCard
|
||||
icon={Users}
|
||||
title="Personnages"
|
||||
mainStat="64 personnages"
|
||||
secondary="Niv. moy: 198"
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
{/* Personnages Card */}
|
||||
<StatCard
|
||||
icon={Users}
|
||||
title="Personnages"
|
||||
mainStat="64 personnages"
|
||||
secondary="Niv. moy: 198"
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
|
||||
{/* Teams Card */}
|
||||
<StatCard
|
||||
icon={Swords}
|
||||
title="Teams"
|
||||
mainStat="3 actives"
|
||||
secondary={
|
||||
<div className="space-y-1">
|
||||
<span>87% complete</span>
|
||||
<ColoredProgress value={87} color="info" />
|
||||
</div>
|
||||
}
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
{/* Teams Card */}
|
||||
<StatCard
|
||||
icon={Swords}
|
||||
title="Teams"
|
||||
mainStat="3 actives"
|
||||
secondary={
|
||||
<div className="space-y-1">
|
||||
<span>87% complete</span>
|
||||
<ColoredProgress value={87} color="info" />
|
||||
</div>
|
||||
}
|
||||
linkText="Voir tout"
|
||||
/>
|
||||
|
||||
{/* Monnaies Card - spans 2 columns on desktop */}
|
||||
<Card className="border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01] xl:col-span-2">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<Coins className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
Monnaies
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
{currencies.map((currency) => (
|
||||
<div key={currency.name} className="space-y-1">
|
||||
<p className="text-sm text-[#94A3B8]">{currency.name}</p>
|
||||
<p className="text-xl font-semibold text-[#F8FAFC]">
|
||||
{currency.amount}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
Détail par compte
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{/* Monnaies Card - spans 2 columns on desktop */}
|
||||
<Card className="border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01] xl:col-span-2">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<Coins className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
Monnaies
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
{currencies.map((currency) => (
|
||||
<div key={currency.name} className="space-y-1">
|
||||
<p className="text-sm text-[#94A3B8]">{currency.name}</p>
|
||||
<p className="text-xl font-semibold text-[#F8FAFC]">
|
||||
{currency.amount}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
Détail par compte
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{/* Progressions Card */}
|
||||
<Card className="border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01]">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<BarChart3 className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
Progressions
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{progressions.map((prog) => (
|
||||
<div key={prog.label} className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-[#F8FAFC]">{prog.label}</span>
|
||||
<span className="text-[#94A3B8]">{prog.value}%</span>
|
||||
</div>
|
||||
<ColoredProgress value={prog.value} color={prog.color} />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
Bulk Update
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
{/* Progressions Card */}
|
||||
<Card className="border-[#334155] bg-[#1E293B] transition-transform duration-150 hover:scale-[1.01]">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-[#60A5FA]/10">
|
||||
<BarChart3 className="size-5 text-[#60A5FA]" />
|
||||
</div>
|
||||
<CardTitle className="text-base font-semibold text-[#F8FAFC]">
|
||||
Progressions
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{progressions.map((prog) => (
|
||||
<div key={prog.label} className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-[#F8FAFC]">{prog.label}</span>
|
||||
<span className="text-[#94A3B8]">{prog.value}%</span>
|
||||
</div>
|
||||
<ColoredProgress value={prog.value} color={prog.color} />
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-2">
|
||||
<button className="flex items-center gap-1 text-sm text-[#60A5FA] hover:underline">
|
||||
Bulk Update
|
||||
<ArrowRight className="size-4" />
|
||||
</button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions Section */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-4 text-lg font-semibold text-[#F8FAFC]">
|
||||
Actions Rapides
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Personnage
|
||||
</Button>
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Team
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="gap-2 rounded-[6px] border-[#334155] bg-[#1E293B] text-[#F8FAFC] hover:bg-[#334155]"
|
||||
>
|
||||
<BarChart3 className="size-4" />
|
||||
Bulk Progressions
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="gap-2 rounded-[6px] border-[#334155] bg-[#1E293B] text-[#F8FAFC] hover:bg-[#334155]"
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Sync DofusDB
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
{/* Quick Actions Section */}
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-4 text-lg font-semibold text-[#F8FAFC]">
|
||||
Actions Rapides
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Personnage
|
||||
</Button>
|
||||
<Button className="gap-2 rounded-[6px] bg-[#60A5FA] text-[#0F172A] hover:bg-[#60A5FA]/90">
|
||||
<Plus className="size-4" />
|
||||
Team
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="gap-2 rounded-[6px] border-[#334155] bg-[#1E293B] text-[#F8FAFC] hover:bg-[#334155]"
|
||||
>
|
||||
<BarChart3 className="size-4" />
|
||||
Bulk Progressions
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="gap-2 rounded-[6px] border-[#334155] bg-[#1E293B] text-[#F8FAFC] hover:bg-[#334155]"
|
||||
>
|
||||
<RefreshCw className="size-4" />
|
||||
Sync DofusDB
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,106 +1,106 @@
|
||||
import { useState } from "react";
|
||||
import { ChevronDown, ChevronRight, Check } from "lucide-react";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Check, ChevronDown, ChevronRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { cn } from "@/lib/utils";
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ProgressionItem {
|
||||
id: string;
|
||||
name: string;
|
||||
completed: boolean;
|
||||
completedDate?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
completed: boolean;
|
||||
completedDate?: string;
|
||||
}
|
||||
|
||||
interface ProgressionSectionProps {
|
||||
title: string;
|
||||
items: ProgressionItem[];
|
||||
filter: "all" | "done" | "not-done";
|
||||
title: string;
|
||||
items: ProgressionItem[];
|
||||
filter: 'all' | 'done' | 'not-done';
|
||||
}
|
||||
|
||||
export function ProgressionSection({
|
||||
title,
|
||||
items,
|
||||
filter,
|
||||
title,
|
||||
items,
|
||||
filter,
|
||||
}: ProgressionSectionProps) {
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
const [localItems, setLocalItems] = useState(items);
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
const [localItems, setLocalItems] = useState(items);
|
||||
|
||||
const filteredItems = localItems.filter((item) => {
|
||||
if (filter === "done") return item.completed;
|
||||
if (filter === "not-done") return !item.completed;
|
||||
return true;
|
||||
});
|
||||
const filteredItems = localItems.filter((item) => {
|
||||
if (filter === 'done') return item.completed;
|
||||
if (filter === 'not-done') return !item.completed;
|
||||
return true;
|
||||
});
|
||||
|
||||
const completedCount = localItems.filter((item) => item.completed).length;
|
||||
const totalCount = localItems.length;
|
||||
const completedCount = localItems.filter((item) => item.completed).length;
|
||||
const totalCount = localItems.length;
|
||||
|
||||
const handleToggle = (id: string) => {
|
||||
setLocalItems((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
completed: !item.completed,
|
||||
completedDate: !item.completed
|
||||
? new Date().toISOString().split("T")[0]
|
||||
: undefined,
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
const handleToggle = (id: string) => {
|
||||
setLocalItems((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
completed: !item.completed,
|
||||
completedDate: !item.completed
|
||||
? new Date().toISOString().split('T')[0]
|
||||
: undefined,
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
if (filteredItems.length === 0) return null;
|
||||
if (filteredItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-2">
|
||||
<CollapsibleTrigger className="flex w-full items-center gap-2 py-2 text-left hover:bg-secondary/50 rounded-md px-2 transition-colors">
|
||||
{isOpen ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="font-medium text-foreground">{title}</span>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
({completedCount}/{totalCount})
|
||||
</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-1 pl-6">
|
||||
{filteredItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center gap-3 py-2 px-2 rounded-md hover:bg-secondary/30 transition-colors"
|
||||
>
|
||||
<Checkbox
|
||||
id={item.id}
|
||||
checked={item.completed}
|
||||
onCheckedChange={() => handleToggle(item.id)}
|
||||
className="border-muted-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary"
|
||||
/>
|
||||
<label
|
||||
htmlFor={item.id}
|
||||
className={cn(
|
||||
"flex-1 text-sm cursor-pointer",
|
||||
item.completed ? "text-foreground" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
{item.completed ? (
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<Check className="h-3.5 w-3.5" style={{ color: "#4ADE80" }} />
|
||||
<span style={{ color: "#4ADE80" }}>{item.completedDate}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-sm">—</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
return (
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-2">
|
||||
<CollapsibleTrigger className="flex w-full items-center gap-2 py-2 text-left hover:bg-secondary/50 rounded-md px-2 transition-colors">
|
||||
{isOpen ? (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="font-medium text-foreground">{title}</span>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
({completedCount}/{totalCount})
|
||||
</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-1 pl-6">
|
||||
{filteredItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center gap-3 py-2 px-2 rounded-md hover:bg-secondary/30 transition-colors"
|
||||
>
|
||||
<Checkbox
|
||||
id={item.id}
|
||||
checked={item.completed}
|
||||
onCheckedChange={() => handleToggle(item.id)}
|
||||
className="border-muted-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary"
|
||||
/>
|
||||
<label
|
||||
htmlFor={item.id}
|
||||
className={cn(
|
||||
'flex-1 text-sm cursor-pointer',
|
||||
item.completed ? 'text-foreground' : 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
{item.completed ? (
|
||||
<div className="flex items-center gap-1.5 text-sm">
|
||||
<Check className="h-3.5 w-3.5" style={{ color: '#4ADE80' }} />
|
||||
<span style={{ color: '#4ADE80' }}>{item.completedDate}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-sm">—</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,225 +1,225 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ChevronRight,
|
||||
Pencil,
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
CheckCircle,
|
||||
ChevronRight,
|
||||
Pencil,
|
||||
Trash2,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { ConfirmationModal } from '@/components/confirmation-modal';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Button } from "@/components/ui/button";
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ConfirmationModal } from "@/components/confirmation-modal";
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
|
||||
// Mock data
|
||||
const teamMembers = [
|
||||
{ id: 1, name: "Krosmaster", completed: true, date: "2026-01-10" },
|
||||
{ id: 2, name: "TankMaster", completed: true, date: "2026-01-10" },
|
||||
{ id: 3, name: "HealBot", completed: false, date: null },
|
||||
{ id: 4, name: "SramKiller", completed: false, date: null },
|
||||
{ id: 5, name: "Eniripsa", completed: true, date: "2026-01-09" },
|
||||
{ id: 6, name: "Sacrieur", completed: true, date: "2026-01-08" },
|
||||
{ id: 7, name: "Pandawa", completed: true, date: "2026-01-10" },
|
||||
{ id: 8, name: "Eliotrope", completed: true, date: "2026-01-07" },
|
||||
{ id: 1, name: 'Krosmaster', completed: true, date: '2026-01-10' },
|
||||
{ id: 2, name: 'TankMaster', completed: true, date: '2026-01-10' },
|
||||
{ id: 3, name: 'HealBot', completed: false, date: null },
|
||||
{ id: 4, name: 'SramKiller', completed: false, date: null },
|
||||
{ id: 5, name: 'Eniripsa', completed: true, date: '2026-01-09' },
|
||||
{ id: 6, name: 'Sacrieur', completed: true, date: '2026-01-08' },
|
||||
{ id: 7, name: 'Pandawa', completed: true, date: '2026-01-10' },
|
||||
{ id: 8, name: 'Eliotrope', completed: true, date: '2026-01-07' },
|
||||
];
|
||||
|
||||
const progressions = [
|
||||
{ id: "dofus-turquoise", name: "Dofus Turquoise" },
|
||||
{ id: "donjon-bethel", name: "Donjon Bethel" },
|
||||
{ id: "quete-ebene", name: "Quête Ébène" },
|
||||
{ id: "succes-dimension", name: "Succès Dimension" },
|
||||
{ id: 'dofus-turquoise', name: 'Dofus Turquoise' },
|
||||
{ id: 'donjon-bethel', name: 'Donjon Bethel' },
|
||||
{ id: 'quete-ebene', name: 'Quête Ébène' },
|
||||
{ id: 'succes-dimension', name: 'Succès Dimension' },
|
||||
];
|
||||
|
||||
export default function TeamDetailPage() {
|
||||
const [selectedProgression, setSelectedProgression] =
|
||||
useState("dofus-turquoise");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [selectedProgression, setSelectedProgression] =
|
||||
useState('dofus-turquoise');
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const completedCount = teamMembers.filter((m) => m.completed).length;
|
||||
const totalCount = teamMembers.length;
|
||||
const incompleteCount = totalCount - completedCount;
|
||||
const progressPercentage = Math.round((completedCount / totalCount) * 100);
|
||||
const completedCount = teamMembers.filter((m) => m.completed).length;
|
||||
const totalCount = teamMembers.length;
|
||||
const incompleteCount = totalCount - completedCount;
|
||||
const progressPercentage = Math.round((completedCount / totalCount) * 100);
|
||||
|
||||
const selectedProgressionName =
|
||||
progressions.find((p) => p.id === selectedProgression)?.name || "";
|
||||
const selectedProgressionName =
|
||||
progressions.find((p) => p.id === selectedProgression)?.name || '';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
{/* Header with Breadcrumb and Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<nav className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<span className="hover:text-foreground cursor-pointer">Teams</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<span className="text-foreground">Main Team</span>
|
||||
</nav>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<Pencil className="h-4 w-4" />
|
||||
<span className="sr-only">Edit team</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Delete team</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
{/* Header with Breadcrumb and Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<nav className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<span className="hover:text-foreground cursor-pointer">Teams</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<span className="text-foreground">Main Team</span>
|
||||
</nav>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<Pencil className="h-4 w-4" />
|
||||
<span className="sr-only">Edit team</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="sr-only">Delete team</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Info Card */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-6">
|
||||
<h1 className="text-2xl font-bold tracking-tight">MAIN TEAM</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Type: Main</p>
|
||||
<div className="mt-4 flex items-center gap-3 text-sm">
|
||||
<span>{totalCount} membres</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-[#4ADE80]/20 text-[#4ADE80] hover:bg-[#4ADE80]/30"
|
||||
>
|
||||
✅ Active
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span>{totalCount} comptes différents</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Team Info Card */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-6">
|
||||
<h1 className="text-2xl font-bold tracking-tight">MAIN TEAM</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Type: Main</p>
|
||||
<div className="mt-4 flex items-center gap-3 text-sm">
|
||||
<span>{totalCount} membres</span>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-[#4ADE80]/20 text-[#4ADE80] hover:bg-[#4ADE80]/30"
|
||||
>
|
||||
✅ Active
|
||||
</Badge>
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span>{totalCount} comptes différents</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="statut-progressions" className="w-full">
|
||||
<TabsList className="w-full justify-start rounded-lg bg-card">
|
||||
<TabsTrigger value="membres" className="rounded-md">
|
||||
Membres
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="statut-progressions" className="rounded-md">
|
||||
Statut Progressions
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{/* Tabs */}
|
||||
<Tabs defaultValue="statut-progressions" className="w-full">
|
||||
<TabsList className="w-full justify-start rounded-lg bg-card">
|
||||
<TabsTrigger value="membres" className="rounded-md">
|
||||
Membres
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="statut-progressions" className="rounded-md">
|
||||
Statut Progressions
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Membres Tab - Placeholder */}
|
||||
<TabsContent value="membres" className="mt-4">
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-muted-foreground">
|
||||
Liste des membres à venir...
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
{/* Membres Tab - Placeholder */}
|
||||
<TabsContent value="membres" className="mt-4">
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-muted-foreground">
|
||||
Liste des membres à venir...
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Statut Progressions Tab */}
|
||||
<TabsContent value="statut-progressions" className="mt-4 space-y-4">
|
||||
{/* Progression Selector */}
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm font-medium">Progression:</label>
|
||||
<Select
|
||||
value={selectedProgression}
|
||||
onValueChange={setSelectedProgression}
|
||||
>
|
||||
<SelectTrigger className="w-[220px] rounded-md">
|
||||
<SelectValue placeholder="Sélectionner une progression" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{progressions.map((prog) => (
|
||||
<SelectItem key={prog.id} value={prog.id}>
|
||||
{prog.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{/* Statut Progressions Tab */}
|
||||
<TabsContent value="statut-progressions" className="mt-4 space-y-4">
|
||||
{/* Progression Selector */}
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-sm font-medium">Progression:</label>
|
||||
<Select
|
||||
value={selectedProgression}
|
||||
onValueChange={setSelectedProgression}
|
||||
>
|
||||
<SelectTrigger className="w-[220px] rounded-md">
|
||||
<SelectValue placeholder="Sélectionner une progression" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{progressions.map((prog) => (
|
||||
<SelectItem key={prog.id} value={prog.id}>
|
||||
{prog.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Progress Summary */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium">
|
||||
{progressPercentage}% ({completedCount}/{totalCount})
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={progressPercentage}
|
||||
className="h-4 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
disabled={incompleteCount === 0}
|
||||
className="rounded-md"
|
||||
>
|
||||
Marquer tous comme fait
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Progress Summary */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium">
|
||||
{progressPercentage}% ({completedCount}/{totalCount})
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={progressPercentage}
|
||||
className="h-4 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
disabled={incompleteCount === 0}
|
||||
className="rounded-md"
|
||||
>
|
||||
Marquer tous comme fait
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Status Table */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableHead className="h-10">Perso</TableHead>
|
||||
<TableHead className="h-10">Statut</TableHead>
|
||||
<TableHead className="h-10">Date</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{teamMembers.map((member) => (
|
||||
<TableRow key={member.id} className="h-10">
|
||||
<TableCell className="py-2 font-medium">
|
||||
{member.name}
|
||||
</TableCell>
|
||||
<TableCell className="py-2">
|
||||
{member.completed ? (
|
||||
<CheckCircle className="h-5 w-5 text-[#4ADE80]" />
|
||||
) : (
|
||||
<XCircle className="h-5 w-5 text-[#F87171]" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="py-2 text-muted-foreground">
|
||||
{member.date || "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
{/* Status Table */}
|
||||
<Card className="rounded-lg">
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableHead className="h-10">Perso</TableHead>
|
||||
<TableHead className="h-10">Statut</TableHead>
|
||||
<TableHead className="h-10">Date</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{teamMembers.map((member) => (
|
||||
<TableRow key={member.id} className="h-10">
|
||||
<TableCell className="py-2 font-medium">
|
||||
{member.name}
|
||||
</TableCell>
|
||||
<TableCell className="py-2">
|
||||
{member.completed ? (
|
||||
<CheckCircle className="h-5 w-5 text-[#4ADE80]" />
|
||||
) : (
|
||||
<XCircle className="h-5 w-5 text-[#F87171]" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="py-2 text-muted-foreground">
|
||||
{member.date || '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Modal */}
|
||||
<ConfirmationModal
|
||||
open={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
progressionName={selectedProgressionName}
|
||||
incompleteCount={incompleteCount}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
{/* Confirmation Modal */}
|
||||
<ConfirmationModal
|
||||
open={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
progressionName={selectedProgressionName}
|
||||
incompleteCount={incompleteCount}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import type * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
"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",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
"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",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
'icon-sm': 'size-8',
|
||||
'icon-lg': 'size-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
className,
|
||||
variant = 'default',
|
||||
size = 'default',
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
export { Button, buttonVariants };
|
||||
|
||||
@@ -1,92 +1,92 @@
|
||||
import * as React from "react"
|
||||
import type * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn('leading-none font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn('px-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
};
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import * as React from "react"
|
||||
import type * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"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",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
'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',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input }
|
||||
export { Input };
|
||||
|
||||
@@ -1,114 +1,114 @@
|
||||
import * as React from "react"
|
||||
import type * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
function Table({ className, ...props }: React.ComponentProps<'table'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn('w-full caption-bottom text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn('[&_tr]:border-b', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn('[&_tr:last-child]:border-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<'caption'>) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn('text-muted-foreground mt-4 text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
};
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { createServerFn } from '@tanstack/react-start'
|
||||
import { createServerFn } from '@tanstack/react-start';
|
||||
|
||||
export const getPunkSongs = createServerFn({
|
||||
method: 'GET',
|
||||
method: 'GET',
|
||||
}).handler(async () => [
|
||||
{ id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },
|
||||
{ id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },
|
||||
{ id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },
|
||||
{ id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },
|
||||
{ id: 5, name: 'Fat Lip', artist: 'Sum 41' },
|
||||
{ id: 6, name: 'All the Small Things', artist: 'blink-182' },
|
||||
{ id: 7, name: 'Beverly Hills', artist: 'Weezer' },
|
||||
])
|
||||
{ id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },
|
||||
{ id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },
|
||||
{ id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },
|
||||
{ id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },
|
||||
{ id: 5, name: 'Fat Lip', artist: 'Sum 41' },
|
||||
{ id: 6, name: 'All the Small Things', artist: 'blink-182' },
|
||||
{ id: 7, name: 'Beverly Hills', artist: 'Weezer' },
|
||||
]);
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const globalForPrisma = globalThis as unknown as {
|
||||
prisma: PrismaClient | undefined;
|
||||
prisma: PrismaClient | undefined;
|
||||
};
|
||||
|
||||
export const prisma =
|
||||
globalForPrisma.prisma ??
|
||||
new PrismaClient({
|
||||
log:
|
||||
process.env.NODE_ENV === "development"
|
||||
? ["query", "error", "warn"]
|
||||
: ["error"],
|
||||
});
|
||||
globalForPrisma.prisma ??
|
||||
new PrismaClient({
|
||||
log:
|
||||
process.env.NODE_ENV === 'development'
|
||||
? ['query', 'error', 'warn']
|
||||
: ['error'],
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
globalForPrisma.prisma = prisma;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
globalForPrisma.prisma = prisma;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
@@ -8,212 +8,213 @@
|
||||
// You should NOT make any changes in this file as it will be overwritten.
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as DemoStartServerFuncsRouteImport } from './routes/demo/start.server-funcs'
|
||||
import { Route as DemoStartApiRequestRouteImport } from './routes/demo/start.api-request'
|
||||
import { Route as DemoApiNamesRouteImport } from './routes/demo/api.names'
|
||||
import { Route as DemoStartSsrIndexRouteImport } from './routes/demo/start.ssr.index'
|
||||
import { Route as DemoStartSsrSpaModeRouteImport } from './routes/demo/start.ssr.spa-mode'
|
||||
import { Route as DemoStartSsrFullSsrRouteImport } from './routes/demo/start.ssr.full-ssr'
|
||||
import { Route as DemoStartSsrDataOnlyRouteImport } from './routes/demo/start.ssr.data-only'
|
||||
import { Route as rootRouteImport } from './routes/__root';
|
||||
import { Route as DemoApiNamesRouteImport } from './routes/demo/api.names';
|
||||
import { Route as DemoStartApiRequestRouteImport } from './routes/demo/start.api-request';
|
||||
import { Route as DemoStartServerFuncsRouteImport } from './routes/demo/start.server-funcs';
|
||||
import { Route as DemoStartSsrDataOnlyRouteImport } from './routes/demo/start.ssr.data-only';
|
||||
import { Route as DemoStartSsrFullSsrRouteImport } from './routes/demo/start.ssr.full-ssr';
|
||||
import { Route as DemoStartSsrIndexRouteImport } from './routes/demo/start.ssr.index';
|
||||
import { Route as DemoStartSsrSpaModeRouteImport } from './routes/demo/start.ssr.spa-mode';
|
||||
import { Route as IndexRouteImport } from './routes/index';
|
||||
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartServerFuncsRoute = DemoStartServerFuncsRouteImport.update({
|
||||
id: '/demo/start/server-funcs',
|
||||
path: '/demo/start/server-funcs',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/server-funcs',
|
||||
path: '/demo/start/server-funcs',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartApiRequestRoute = DemoStartApiRequestRouteImport.update({
|
||||
id: '/demo/start/api-request',
|
||||
path: '/demo/start/api-request',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/api-request',
|
||||
path: '/demo/start/api-request',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoApiNamesRoute = DemoApiNamesRouteImport.update({
|
||||
id: '/demo/api/names',
|
||||
path: '/demo/api/names',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/api/names',
|
||||
path: '/demo/api/names',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartSsrIndexRoute = DemoStartSsrIndexRouteImport.update({
|
||||
id: '/demo/start/ssr/',
|
||||
path: '/demo/start/ssr/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/ssr/',
|
||||
path: '/demo/start/ssr/',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartSsrSpaModeRoute = DemoStartSsrSpaModeRouteImport.update({
|
||||
id: '/demo/start/ssr/spa-mode',
|
||||
path: '/demo/start/ssr/spa-mode',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/ssr/spa-mode',
|
||||
path: '/demo/start/ssr/spa-mode',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartSsrFullSsrRoute = DemoStartSsrFullSsrRouteImport.update({
|
||||
id: '/demo/start/ssr/full-ssr',
|
||||
path: '/demo/start/ssr/full-ssr',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/ssr/full-ssr',
|
||||
path: '/demo/start/ssr/full-ssr',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
const DemoStartSsrDataOnlyRoute = DemoStartSsrDataOnlyRouteImport.update({
|
||||
id: '/demo/start/ssr/data-only',
|
||||
path: '/demo/start/ssr/data-only',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
id: '/demo/start/ssr/data-only',
|
||||
path: '/demo/start/ssr/data-only',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any);
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/demo/api/names': typeof DemoApiNamesRoute
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
|
||||
'/demo/start/ssr/': typeof DemoStartSsrIndexRoute
|
||||
'/': typeof IndexRoute;
|
||||
'/demo/api/names': typeof DemoApiNamesRoute;
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute;
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute;
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute;
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute;
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute;
|
||||
'/demo/start/ssr/': typeof DemoStartSsrIndexRoute;
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/demo/api/names': typeof DemoApiNamesRoute
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
|
||||
'/demo/start/ssr': typeof DemoStartSsrIndexRoute
|
||||
'/': typeof IndexRoute;
|
||||
'/demo/api/names': typeof DemoApiNamesRoute;
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute;
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute;
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute;
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute;
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute;
|
||||
'/demo/start/ssr': typeof DemoStartSsrIndexRoute;
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/demo/api/names': typeof DemoApiNamesRoute
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute
|
||||
'/demo/start/ssr/': typeof DemoStartSsrIndexRoute
|
||||
__root__: typeof rootRouteImport;
|
||||
'/': typeof IndexRoute;
|
||||
'/demo/api/names': typeof DemoApiNamesRoute;
|
||||
'/demo/start/api-request': typeof DemoStartApiRequestRoute;
|
||||
'/demo/start/server-funcs': typeof DemoStartServerFuncsRoute;
|
||||
'/demo/start/ssr/data-only': typeof DemoStartSsrDataOnlyRoute;
|
||||
'/demo/start/ssr/full-ssr': typeof DemoStartSsrFullSsrRoute;
|
||||
'/demo/start/ssr/spa-mode': typeof DemoStartSsrSpaModeRoute;
|
||||
'/demo/start/ssr/': typeof DemoStartSsrIndexRoute;
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr/'
|
||||
fileRoutesById: FileRoutesById
|
||||
fileRoutesByFullPath: FileRoutesByFullPath;
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr/';
|
||||
fileRoutesByTo: FileRoutesByTo;
|
||||
to:
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr';
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/demo/api/names'
|
||||
| '/demo/start/api-request'
|
||||
| '/demo/start/server-funcs'
|
||||
| '/demo/start/ssr/data-only'
|
||||
| '/demo/start/ssr/full-ssr'
|
||||
| '/demo/start/ssr/spa-mode'
|
||||
| '/demo/start/ssr/';
|
||||
fileRoutesById: FileRoutesById;
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
DemoApiNamesRoute: typeof DemoApiNamesRoute
|
||||
DemoStartApiRequestRoute: typeof DemoStartApiRequestRoute
|
||||
DemoStartServerFuncsRoute: typeof DemoStartServerFuncsRoute
|
||||
DemoStartSsrDataOnlyRoute: typeof DemoStartSsrDataOnlyRoute
|
||||
DemoStartSsrFullSsrRoute: typeof DemoStartSsrFullSsrRoute
|
||||
DemoStartSsrSpaModeRoute: typeof DemoStartSsrSpaModeRoute
|
||||
DemoStartSsrIndexRoute: typeof DemoStartSsrIndexRoute
|
||||
IndexRoute: typeof IndexRoute;
|
||||
DemoApiNamesRoute: typeof DemoApiNamesRoute;
|
||||
DemoStartApiRequestRoute: typeof DemoStartApiRequestRoute;
|
||||
DemoStartServerFuncsRoute: typeof DemoStartServerFuncsRoute;
|
||||
DemoStartSsrDataOnlyRoute: typeof DemoStartSsrDataOnlyRoute;
|
||||
DemoStartSsrFullSsrRoute: typeof DemoStartSsrFullSsrRoute;
|
||||
DemoStartSsrSpaModeRoute: typeof DemoStartSsrSpaModeRoute;
|
||||
DemoStartSsrIndexRoute: typeof DemoStartSsrIndexRoute;
|
||||
}
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
fullPath: '/'
|
||||
preLoaderRoute: typeof IndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/server-funcs': {
|
||||
id: '/demo/start/server-funcs'
|
||||
path: '/demo/start/server-funcs'
|
||||
fullPath: '/demo/start/server-funcs'
|
||||
preLoaderRoute: typeof DemoStartServerFuncsRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/api-request': {
|
||||
id: '/demo/start/api-request'
|
||||
path: '/demo/start/api-request'
|
||||
fullPath: '/demo/start/api-request'
|
||||
preLoaderRoute: typeof DemoStartApiRequestRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/api/names': {
|
||||
id: '/demo/api/names'
|
||||
path: '/demo/api/names'
|
||||
fullPath: '/demo/api/names'
|
||||
preLoaderRoute: typeof DemoApiNamesRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/ssr/': {
|
||||
id: '/demo/start/ssr/'
|
||||
path: '/demo/start/ssr'
|
||||
fullPath: '/demo/start/ssr/'
|
||||
preLoaderRoute: typeof DemoStartSsrIndexRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/ssr/spa-mode': {
|
||||
id: '/demo/start/ssr/spa-mode'
|
||||
path: '/demo/start/ssr/spa-mode'
|
||||
fullPath: '/demo/start/ssr/spa-mode'
|
||||
preLoaderRoute: typeof DemoStartSsrSpaModeRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/ssr/full-ssr': {
|
||||
id: '/demo/start/ssr/full-ssr'
|
||||
path: '/demo/start/ssr/full-ssr'
|
||||
fullPath: '/demo/start/ssr/full-ssr'
|
||||
preLoaderRoute: typeof DemoStartSsrFullSsrRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/demo/start/ssr/data-only': {
|
||||
id: '/demo/start/ssr/data-only'
|
||||
path: '/demo/start/ssr/data-only'
|
||||
fullPath: '/demo/start/ssr/data-only'
|
||||
preLoaderRoute: typeof DemoStartSsrDataOnlyRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
}
|
||||
interface FileRoutesByPath {
|
||||
'/': {
|
||||
id: '/';
|
||||
path: '/';
|
||||
fullPath: '/';
|
||||
preLoaderRoute: typeof IndexRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/server-funcs': {
|
||||
id: '/demo/start/server-funcs';
|
||||
path: '/demo/start/server-funcs';
|
||||
fullPath: '/demo/start/server-funcs';
|
||||
preLoaderRoute: typeof DemoStartServerFuncsRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/api-request': {
|
||||
id: '/demo/start/api-request';
|
||||
path: '/demo/start/api-request';
|
||||
fullPath: '/demo/start/api-request';
|
||||
preLoaderRoute: typeof DemoStartApiRequestRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/api/names': {
|
||||
id: '/demo/api/names';
|
||||
path: '/demo/api/names';
|
||||
fullPath: '/demo/api/names';
|
||||
preLoaderRoute: typeof DemoApiNamesRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/ssr/': {
|
||||
id: '/demo/start/ssr/';
|
||||
path: '/demo/start/ssr';
|
||||
fullPath: '/demo/start/ssr/';
|
||||
preLoaderRoute: typeof DemoStartSsrIndexRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/ssr/spa-mode': {
|
||||
id: '/demo/start/ssr/spa-mode';
|
||||
path: '/demo/start/ssr/spa-mode';
|
||||
fullPath: '/demo/start/ssr/spa-mode';
|
||||
preLoaderRoute: typeof DemoStartSsrSpaModeRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/ssr/full-ssr': {
|
||||
id: '/demo/start/ssr/full-ssr';
|
||||
path: '/demo/start/ssr/full-ssr';
|
||||
fullPath: '/demo/start/ssr/full-ssr';
|
||||
preLoaderRoute: typeof DemoStartSsrFullSsrRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
'/demo/start/ssr/data-only': {
|
||||
id: '/demo/start/ssr/data-only';
|
||||
path: '/demo/start/ssr/data-only';
|
||||
fullPath: '/demo/start/ssr/data-only';
|
||||
preLoaderRoute: typeof DemoStartSsrDataOnlyRouteImport;
|
||||
parentRoute: typeof rootRouteImport;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
DemoApiNamesRoute: DemoApiNamesRoute,
|
||||
DemoStartApiRequestRoute: DemoStartApiRequestRoute,
|
||||
DemoStartServerFuncsRoute: DemoStartServerFuncsRoute,
|
||||
DemoStartSsrDataOnlyRoute: DemoStartSsrDataOnlyRoute,
|
||||
DemoStartSsrFullSsrRoute: DemoStartSsrFullSsrRoute,
|
||||
DemoStartSsrSpaModeRoute: DemoStartSsrSpaModeRoute,
|
||||
DemoStartSsrIndexRoute: DemoStartSsrIndexRoute,
|
||||
}
|
||||
IndexRoute: IndexRoute,
|
||||
DemoApiNamesRoute: DemoApiNamesRoute,
|
||||
DemoStartApiRequestRoute: DemoStartApiRequestRoute,
|
||||
DemoStartServerFuncsRoute: DemoStartServerFuncsRoute,
|
||||
DemoStartSsrDataOnlyRoute: DemoStartSsrDataOnlyRoute,
|
||||
DemoStartSsrFullSsrRoute: DemoStartSsrFullSsrRoute,
|
||||
DemoStartSsrSpaModeRoute: DemoStartSsrSpaModeRoute,
|
||||
DemoStartSsrIndexRoute: DemoStartSsrIndexRoute,
|
||||
};
|
||||
export const routeTree = rootRouteImport
|
||||
._addFileChildren(rootRouteChildren)
|
||||
._addFileTypes<FileRouteTypes>()
|
||||
._addFileChildren(rootRouteChildren)
|
||||
._addFileTypes<FileRouteTypes>();
|
||||
|
||||
import type { createStart } from '@tanstack/react-start';
|
||||
import type { getRouter } from './router.tsx';
|
||||
|
||||
import type { getRouter } from './router.tsx'
|
||||
import type { createStart } from '@tanstack/react-start'
|
||||
declare module '@tanstack/react-start' {
|
||||
interface Register {
|
||||
ssr: true
|
||||
router: Awaited<ReturnType<typeof getRouter>>
|
||||
}
|
||||
interface Register {
|
||||
ssr: true;
|
||||
router: Awaited<ReturnType<typeof getRouter>>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { createRouter } from '@tanstack/react-router'
|
||||
import { createRouter } from '@tanstack/react-router';
|
||||
|
||||
// Import the generated route tree
|
||||
import { routeTree } from './routeTree.gen'
|
||||
import { routeTree } from './routeTree.gen';
|
||||
|
||||
// Create a new router instance
|
||||
export const getRouter = () => {
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
context: {},
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
context: {},
|
||||
|
||||
scrollRestoration: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
})
|
||||
scrollRestoration: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
});
|
||||
|
||||
return router
|
||||
}
|
||||
return router;
|
||||
};
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
|
||||
import { TanStackDevtools } from '@tanstack/react-devtools'
|
||||
import { TanStackDevtools } from '@tanstack/react-devtools';
|
||||
import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router';
|
||||
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
|
||||
|
||||
import Header from '../components/Header'
|
||||
import Header from '../components/Header';
|
||||
|
||||
import appCss from '../styles.css?url'
|
||||
import appCss from '../styles.css?url';
|
||||
|
||||
export const Route = createRootRoute({
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
charSet: 'utf-8',
|
||||
},
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1',
|
||||
},
|
||||
{
|
||||
title: 'TanStack Start Starter',
|
||||
},
|
||||
],
|
||||
links: [
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: appCss,
|
||||
},
|
||||
],
|
||||
}),
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
charSet: 'utf-8',
|
||||
},
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1',
|
||||
},
|
||||
{
|
||||
title: 'TanStack Start Starter',
|
||||
},
|
||||
],
|
||||
links: [
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: appCss,
|
||||
},
|
||||
],
|
||||
}),
|
||||
|
||||
shellComponent: RootDocument,
|
||||
})
|
||||
shellComponent: RootDocument,
|
||||
});
|
||||
|
||||
function RootDocument({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<HeadContent />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
{children}
|
||||
<TanStackDevtools
|
||||
config={{
|
||||
position: 'bottom-right',
|
||||
}}
|
||||
plugins={[
|
||||
{
|
||||
name: 'Tanstack Router',
|
||||
render: <TanStackRouterDevtoolsPanel />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<HeadContent />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
{children}
|
||||
<TanStackDevtools
|
||||
config={{
|
||||
position: 'bottom-right',
|
||||
}}
|
||||
plugins={[
|
||||
{
|
||||
name: 'Tanstack Router',
|
||||
render: <TanStackRouterDevtoolsPanel />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { createAPIFileRoute } from "@tanstack/start/api";
|
||||
import { prisma } from "@/lib/server/db";
|
||||
import { createAPIFileRoute } from '@tanstack/start/api';
|
||||
import { prisma } from '@/lib/server/db';
|
||||
|
||||
export const Route = createAPIFileRoute("/api/health")({
|
||||
GET: async () => {
|
||||
let dbStatus = "disconnected";
|
||||
try {
|
||||
await prisma.$queryRaw`SELECT 1`;
|
||||
dbStatus = "connected";
|
||||
} catch {
|
||||
dbStatus = "error";
|
||||
}
|
||||
export const Route = createAPIFileRoute('/api/health')({
|
||||
GET: async () => {
|
||||
let dbStatus = 'disconnected';
|
||||
try {
|
||||
await prisma.$queryRaw`SELECT 1`;
|
||||
dbStatus = 'connected';
|
||||
} catch {
|
||||
dbStatus = 'error';
|
||||
}
|
||||
|
||||
return Response.json({
|
||||
status: "ok",
|
||||
timestamp: new Date().toISOString(),
|
||||
database: dbStatus,
|
||||
});
|
||||
},
|
||||
return Response.json({
|
||||
status: 'ok',
|
||||
timestamp: new Date().toISOString(),
|
||||
database: dbStatus,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { json } from '@tanstack/react-start'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { json } from '@tanstack/react-start';
|
||||
|
||||
export const Route = createFileRoute('/demo/api/names')({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: () => json(['Alice', 'Bob', 'Charlie']),
|
||||
},
|
||||
},
|
||||
})
|
||||
server: {
|
||||
handlers: {
|
||||
GET: () => json(['Alice', 'Bob', 'Charlie']),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,33 +1,34 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import './start.css'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import './start.css';
|
||||
|
||||
function getNames() {
|
||||
return fetch('/demo/api/names').then((res) => res.json() as Promise<string[]>)
|
||||
return fetch('/demo/api/names').then(
|
||||
(res) => res.json() as Promise<string[]>,
|
||||
);
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/demo/start/api-request')({
|
||||
component: Home,
|
||||
})
|
||||
component: Home,
|
||||
});
|
||||
|
||||
function Home() {
|
||||
const [names, setNames] = useState<Array<string>>([])
|
||||
const [names, setNames] = useState<Array<string>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getNames().then(setNames)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
getNames().then(setNames);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="api-page">
|
||||
<div className="content">
|
||||
<h1>Start API Request Demo - Names List</h1>
|
||||
<ul>
|
||||
{names.map((name) => (
|
||||
<li key={name}>{name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="api-page">
|
||||
<div className="content">
|
||||
<h1>Start API Request Demo - Names List</h1>
|
||||
<ul>
|
||||
{names.map((name) => (
|
||||
<li key={name}>{name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import fs from 'node:fs'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { createFileRoute, useRouter } from '@tanstack/react-router'
|
||||
import { createServerFn } from '@tanstack/react-start'
|
||||
import './start.css'
|
||||
import fs from 'node:fs';
|
||||
import { createFileRoute, useRouter } from '@tanstack/react-router';
|
||||
import { createServerFn } from '@tanstack/react-start';
|
||||
import { useCallback, useState } from 'react';
|
||||
import './start.css';
|
||||
|
||||
/*
|
||||
const loggingMiddleware = createMiddleware().server(
|
||||
@@ -16,77 +16,77 @@ const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
|
||||
]);
|
||||
*/
|
||||
|
||||
const TODOS_FILE = 'todos.json'
|
||||
const TODOS_FILE = 'todos.json';
|
||||
|
||||
async function readTodos() {
|
||||
return JSON.parse(
|
||||
await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
|
||||
JSON.stringify(
|
||||
[
|
||||
{ id: 1, name: 'Get groceries' },
|
||||
{ id: 2, name: 'Buy a new phone' },
|
||||
],
|
||||
null,
|
||||
2,
|
||||
),
|
||||
),
|
||||
)
|
||||
return JSON.parse(
|
||||
await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
|
||||
JSON.stringify(
|
||||
[
|
||||
{ id: 1, name: 'Get groceries' },
|
||||
{ id: 2, name: 'Buy a new phone' },
|
||||
],
|
||||
null,
|
||||
2,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const getTodos = createServerFn({
|
||||
method: 'GET',
|
||||
}).handler(async () => await readTodos())
|
||||
method: 'GET',
|
||||
}).handler(async () => await readTodos());
|
||||
|
||||
const addTodo = createServerFn({ method: 'POST' })
|
||||
.inputValidator((d: string) => d)
|
||||
.handler(async ({ data }) => {
|
||||
const todos = await readTodos()
|
||||
todos.push({ id: todos.length + 1, name: data })
|
||||
await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
|
||||
return todos
|
||||
})
|
||||
.inputValidator((d: string) => d)
|
||||
.handler(async ({ data }) => {
|
||||
const todos = await readTodos();
|
||||
todos.push({ id: todos.length + 1, name: data });
|
||||
await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2));
|
||||
return todos;
|
||||
});
|
||||
|
||||
export const Route = createFileRoute('/demo/start/server-funcs')({
|
||||
component: Home,
|
||||
loader: async () => await getTodos(),
|
||||
})
|
||||
component: Home,
|
||||
loader: async () => await getTodos(),
|
||||
});
|
||||
|
||||
function Home() {
|
||||
const router = useRouter()
|
||||
let todos = Route.useLoaderData()
|
||||
const router = useRouter();
|
||||
let todos = Route.useLoaderData();
|
||||
|
||||
const [todo, setTodo] = useState('')
|
||||
const [todo, setTodo] = useState('');
|
||||
|
||||
const submitTodo = useCallback(async () => {
|
||||
todos = await addTodo({ data: todo })
|
||||
setTodo('')
|
||||
router.invalidate()
|
||||
}, [addTodo, todo])
|
||||
const submitTodo = useCallback(async () => {
|
||||
todos = await addTodo({ data: todo });
|
||||
setTodo('');
|
||||
router.invalidate();
|
||||
}, [addTodo, todo]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Start Server Functions - Todo Example</h1>
|
||||
<ul>
|
||||
{todos?.map((t) => (
|
||||
<li key={t.id}>{t.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={todo}
|
||||
onChange={(e) => setTodo(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitTodo()
|
||||
}
|
||||
}}
|
||||
placeholder="Enter a new todo..."
|
||||
/>
|
||||
<button disabled={todo.trim().length === 0} onClick={submitTodo}>
|
||||
Add todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<h1>Start Server Functions - Todo Example</h1>
|
||||
<ul>
|
||||
{todos?.map((t) => (
|
||||
<li key={t.id}>{t.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={todo}
|
||||
onChange={(e) => setTodo(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitTodo();
|
||||
}
|
||||
}}
|
||||
placeholder="Enter a new todo..."
|
||||
/>
|
||||
<button disabled={todo.trim().length === 0} onClick={submitTodo}>
|
||||
Add todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs';
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/data-only')({
|
||||
ssr: 'data-only',
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
})
|
||||
ssr: 'data-only',
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const punkSongs = Route.useLoaderData()
|
||||
const punkSongs = Route.useLoaderData();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Data Only SSR - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<h1>Data Only SSR - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs';
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/full-ssr')({
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
})
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const punkSongs = Route.useLoaderData()
|
||||
const punkSongs = Route.useLoaderData();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Full SSR - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<h1>Full SSR - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||
import { createFileRoute, Link } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div>
|
||||
<h1>SSR Demos</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/spa-mode">SPA Mode</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/full-ssr">Full SSR</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/data-only">Data Only</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<h1>SSR Demos</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/spa-mode">SPA Mode</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/full-ssr">Full SSR</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/demo/start/ssr/data-only">Data Only</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs';
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/spa-mode')({
|
||||
ssr: false,
|
||||
component: RouteComponent,
|
||||
})
|
||||
ssr: false,
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const [punkSongs, setPunkSongs] = useState<
|
||||
Awaited<ReturnType<typeof getPunkSongs>>
|
||||
>([])
|
||||
const [punkSongs, setPunkSongs] = useState<
|
||||
Awaited<ReturnType<typeof getPunkSongs>>
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getPunkSongs().then(setPunkSongs)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
getPunkSongs().then(setPunkSongs);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>SPA Mode - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<h1>SPA Mode - Punk Songs</h1>
|
||||
<ul>
|
||||
{punkSongs.map((song) => (
|
||||
<li key={song.id}>
|
||||
{song.name} - {song.artist}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import '../App.css'
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import '../App.css';
|
||||
|
||||
export const Route = createFileRoute('/')({ component: App })
|
||||
export const Route = createFileRoute('/')({ component: App });
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img
|
||||
src="/tanstack-circle-logo.png"
|
||||
className="App-logo"
|
||||
alt="TanStack Logo"
|
||||
/>
|
||||
<p>
|
||||
Edit <code>src/routes/index.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://tanstack.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn TanStack
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img
|
||||
src="/tanstack-circle-logo.png"
|
||||
className="App-logo"
|
||||
alt="TanStack Logo"
|
||||
/>
|
||||
<p>
|
||||
Edit <code>src/routes/index.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://tanstack.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn TanStack
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user