dumtruck/konobangu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: rollback tailwindcss to v3 for temp fix

Browse Source
This commit is contained in:
master 2025-03-04 03:16:06 +08:00
parent e2fdeaabb2
commit 6e4c136614
14 changed files with 630 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
apps/style.css
View File

@ -1,260 +0,0 @@
/* src/app.css or put it where you have your main .css file */
@import 'tailwindcss';
@plugin 'tailwindcss-animate';
@plugin '@kobalte/tailwindcss';
@custom-variant dark (.dark &,[data-kb-theme="dark"] &);
@theme {
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-error: var(--error);
--color-error-foreground: var(--error-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--radius: 0.5rem;
--radius-xl: calc(var(--radius) + 4px);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--kb-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--kb-accordion-content-height);
}
to {
height: 0;
}
}
@keyframes content-show {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes content-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.96);
}
}
@keyframes caret-blink {
0%,
70%,
100% {
opacity: 1;
}
20%,
50% {
opacity: 0;
}
}
--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
--animate-content-show: content-show 0.2s ease-out;
--animate-content-hide: content-hide 0.2s ease-out;
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
}
@utility container {
margin-inline: auto;
padding-inline: 2rem;
@media (width >= --theme(--breakpoint-sm)) {
max-width: none;
}
@media (width >= 1400px) {
max-width: 1400px;
}
}
@utility step {
counter-increment: step;
&:before {
@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
@apply ml-[-50px] mt-[-4px];
content: counter(step);
}
}
@layer base {
:root {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(240 10% 3.9%);
--color-muted: hsl(240 4.8% 95.9%);
--color-muted-foreground: hsl(240 3.8% 46.1%);
--color-popover: hsl(0, 83%, 30%);
--color-popover-foreground: hsl(240 10% 3.9%);
--color-border: hsl(240 5.9% 90%);
--color-input: hsl(240 5.9% 90%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(240 10% 3.9%);
--color-primary: hsl(240 5.9% 10%);
--color-primary-foreground: hsl(0 0% 98%);
--color-secondary: hsl(240 4.8% 95.9%);
--color-secondary-foreground: hsl(240 5.9% 10%);
--color-accent: hsl(240 4.8% 95.9%);
--color-accent-foreground: hsl(240 5.9% 10%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-info: hsl(204 94% 94%);
--color-info-foreground: hsl(199 89% 48%);
--color-success: hsl(149 80% 90%);
--color-success-foreground: hsl(160 84% 39%);
--color-warning: hsl(48 96% 89%);
--color-warning-foreground: hsl(25 95% 53%);
--color-error: hsl(0 93% 94%);
--color-error-foreground: hsl(0 84% 60%);
--color-ring: hsl(240 5.9% 10%);
}
.dark,
[data-kb-theme="dark"] {
--color-background: hsl(240 10% 3.9%);
--color-foreground: hsl(0 0% 98%);
--color-muted: hsl(240 3.7% 15.9%);
--color-muted-foreground: hsl(240 5% 64.9%);
--color-accent: hsl(240 3.7% 15.9%);
--color-accent-foreground: hsl(0 0% 98%);
--color-popover: hsl(240 10% 3.9%);
--color-popover-foreground: hsl(0 0% 98%);
--color-border: hsl(240 3.7% 15.9%);
--color-input: hsl(240 3.7% 15.9%);
--color-card: hsl(240 10% 3.9%);
--color-card-foreground: hsl(0 0% 98%);
--color-primary: hsl(0 0% 98%);
--color-primary-foreground: hsl(240 5.9% 10%);
--color-secondary: hsl(240 3.7% 15.9%);
--color-secondary-foreground: hsl(0 0% 98%);
--color-destructive: hsl(0 62.8% 30.6%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-info: hsl(226.2 57% 21%);
--color-info-foreground: hsl(199 89% 48%);
--color-success: hsl(165.7 91.3% 9%);
--color-success-foreground: hsl(160 84% 39%);
--color-warning: hsl(26 83.3% 14.1%);
--color-warning-foreground: hsl(25 95% 53%);
--color-error: hsl(0 74.7% 15.5%);
--color-error-foreground: hsl(0 84% 60%);
--color-ring: hsl(240 4.9% 83.9%);
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
@media (max-width: 640px) {
.container {
@apply px-4;
}
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
border-radius: 9999px;
border: 4px solid transparent;
background-clip: content-box;
@apply bg-accent;
}
::-webkit-scrollbar-corner {
display: none;
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

4
apps/webui/package.json
View File

@ -16,13 +16,15 @@
"@kobalte/core": "^0.13.9",
"@kobalte/tailwindcss": "^0.9.0",
"@solid-primitives/refs": "^1.1.0",
"@tailwindcss/postcss": "^4.0.9",
"@tanstack/solid-router": "^1.112.2",
"chart.js": "^4.4.8",
"cmdk-solid": "^1.1.2",
"embla-carousel-solid": "^8.5.2",
"lucide-solid": "^0.477.0",
"solid-js": "^1.9.5",
"solid-sonner": "^0.2.8",
"tailwindcss": "3.4.17"
"tailwindcss": "^3"
},
"devDependencies": {
"@rsbuild/plugin-solid": "^1.0.5",

2
apps/webui/postcss.config.mjs
View File

@ -1,5 +1,5 @@
export default {
plugins: {
tailwindcss: {},
'tailwindcss': {},
},
};

17
apps/webui/src/app.css
View File

@ -93,6 +93,23 @@
--radius: 0.5rem;
}
/* custom start */
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
border-radius: 9999px;
border: 4px solid transparent;
background-clip: content-box;
@apply bg-accent;
}
::-webkit-scrollbar-corner {
display: none;
}
/* custom end */
}
@layer base {

174
apps/webui/src/components/layout/app-sidebar.tsx Normal file
View File

@ -0,0 +1,174 @@
import {
AudioWaveform,
BookOpen,
Bot,
ChartPie,
Command,
Frame,
GalleryVerticalEnd,
Map as LucideMap,
Settings2,
SquareTerminal,
} from 'lucide-solid';
import type { ComponentProps } from 'solid-js';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarRail,
} from '~/components/ui/sidebar';
import { NavMain } from './nav-main';
import { NavProjects } from './nav-projects';
import { NavUser } from './nav-user';
import { TeamSwitcher } from './team-switcher';
// This is sample data.
const data = {
user: {
name: 'shadcn',
email: 'm@example.com',
avatar: '/avatars/shadcn.jpg',
},
teams: [
{
name: 'Acme Inc',
logo: GalleryVerticalEnd,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Playground',
url: '#',
icon: SquareTerminal,
isActive: true,
items: [
{
title: 'History',
url: '#',
},
{
title: 'Starred',
url: '#',
},
{
title: 'Settings',
url: '#',
},
],
},
{
title: 'Models',
url: '#',
icon: Bot,
items: [
{
title: 'Genesis',
url: '#',
},
{
title: 'Explorer',
url: '#',
},
{
title: 'Quantum',
url: '#',
},
],
},
{
title: 'Documentation',
url: '#',
icon: BookOpen,
items: [
{
title: 'Introduction',
url: '#',
},
{
title: 'Get Started',
url: '#',
},
{
title: 'Tutorials',
url: '#',
},
{
title: 'Changelog',
url: '#',
},
],
},
{
title: 'Settings',
url: '#',
icon: Settings2,
items: [
{
title: 'General',
url: '#',
},
{
title: 'Team',
url: '#',
},
{
title: 'Billing',
url: '#',
},
{
title: 'Limits',
url: '#',
},
],
},
],
projects: [
{
name: 'Design Engineering',
url: '#',
icon: Frame,
},
{
name: 'Sales & Marketing',
url: '#',
icon: ChartPie,
},
{
name: 'Travel',
url: '#',
icon: LucideMap,
},
],
};
type AppSidebarRootProps = Omit<ComponentProps<typeof Sidebar>, 'collapsible'>;
export const AppSidebar = (props: AppSidebarRootProps) => {
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<TeamSwitcher teams={data.teams} />
</SidebarHeader>
<SidebarContent>
<NavMain items={data.navMain} />
<NavProjects projects={data.projects} />
</SidebarContent>
<SidebarFooter>
<NavUser user={data.user} />
</SidebarFooter>
<SidebarRail />
</Sidebar>
);
};

71
apps/webui/src/components/layout/nav-main.tsx Normal file
View File

@ -0,0 +1,71 @@
import { ChevronRight, type LucideIcon } from 'lucide-solid';
import { For } from 'solid-js';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '~/components/ui/collapsible';
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '~/components/ui/sidebar';
export function NavMain({
items,
}: {
items: {
title: string;
url: string;
icon?: LucideIcon;
isActive?: boolean;
items?: {
title: string;
url: string;
}[];
}[];
}) {
return (
<SidebarGroup>
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
<For each={items}>
{(item) => (
<Collapsible
as={SidebarMenuItem}
defaultOpen={item.isActive}
class="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger as={SidebarMenuButton} tooltip={item.title}>
{item.icon && <item.icon />}
<span>{item.title}</span>
<ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<For each={item.items || []}>
{(subItem) => (
<SidebarMenuSubItem>
<SidebarMenuSubButton as={'a'} href={subItem.url}>
<span>{subItem.title}</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
)}
</For>
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
)}
</For>
</SidebarMenu>
</SidebarGroup>
);
}

79
apps/webui/src/components/layout/nav-projects.tsx Normal file
View File

@ -0,0 +1,79 @@
import {
Folder,
Forward,
type LucideIcon,
MoreHorizontal,
Trash2,
} from 'lucide-solid';
import { For } from 'solid-js';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '~/components/ui/dropdown-menu';
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
} from '~/components/ui/sidebar';
export function NavProjects({
projects,
}: {
projects: {
name: string;
url: string;
icon: LucideIcon;
}[];
}) {
return (
<SidebarGroup class="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Projects</SidebarGroupLabel>
<SidebarMenu>
<For each={projects}>
{(item) => (
<SidebarMenuItem>
<SidebarMenuButton as="a" href={item.url}>
<item.icon />
<span>{item.name}</span>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger as={SidebarMenuAction} showOnHover>
<MoreHorizontal />
<span class="sr-only">More</span>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-48 rounded-lg">
<DropdownMenuItem>
<Folder class="text-muted-foreground" />
<span>View Project</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Forward class="text-muted-foreground" />
<span>Share Project</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 class="text-muted-foreground" />
<span>Delete Project</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
)}
</For>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal class="text-sidebar-foreground/70" />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
);
}

106
apps/webui/src/components/layout/nav-user.tsx Normal file
View File

@ -0,0 +1,106 @@
import {
BadgeCheck,
Bell,
ChevronsUpDown,
CreditCard,
LogOut,
Sparkles,
} from 'lucide-solid';
import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '~/components/ui/dropdown-menu';
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '~/components/ui/sidebar';
export function NavUser({
user,
}: {
user: {
name: string;
email: string;
avatar: string;
};
}) {
const { isMobile } = useSidebar();
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger
as={SidebarMenuButton}
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback class="rounded-lg">CN</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{user.name}</span>
<span class="truncate text-xs">{user.email}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="end"
sideOffset={4}
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback class="rounded-lg">CN</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{user.name}</span>
<span class="truncate text-xs">{user.email}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Sparkles />
Upgrade to Pro
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
);
}

79
apps/webui/src/components/layout/team-switcher.tsx Normal file
View File

@ -0,0 +1,79 @@
import { ChevronsUpDown, type LucideIcon, Plus } from 'lucide-solid';
import { For, createSignal } from 'solid-js';
import { Dynamic } from 'solid-js/web';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '~/components/ui/dropdown-menu';
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '~/components/ui/sidebar';
export function TeamSwitcher(props: {
teams: {
name: string;
logo: LucideIcon;
plan: string;
}[];
}) {
const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
const logo = activeTeam().logo;
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger
as={SidebarMenuButton}
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<Dynamic component={logo} class="size-4" />
</div>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{activeTeam().name}</span>
<span class="truncate text-xs">{activeTeam().plan}</span>
</div>
<ChevronsUpDown class="ml-auto" />
</DropdownMenuTrigger>
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg">
<DropdownMenuLabel class="text-muted-foreground text-xs">
Teams
</DropdownMenuLabel>
<For each={props.teams}>
{(team, index) => (
<DropdownMenuItem
onClick={() => setActiveTeam(team)}
class="gap-2 p-2"
>
<div class="flex size-6 items-center justify-center rounded-sm border">
<Dynamic component={team.logo} class="size-4 shrink-0" />
</div>
{team.name}
<DropdownMenuShortcut>⌘{index() + 1}</DropdownMenuShortcut>
</DropdownMenuItem>
)}
</For>
<DropdownMenuSeparator />
<DropdownMenuItem class="gap-2 p-2">
<div class="flex size-6 items-center justify-center rounded-md border bg-background">
<Plus class="size-4" />
</div>
<div class="font-medium text-muted-foreground">Add team</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
);
}

19
apps/webui/src/main.tsx
View File

@ -1,3 +1,8 @@
import {
ColorModeProvider,
ColorModeScript,
createLocalStorageManager,
} from '@kobalte/core';
import { RouterProvider, createRouter } from '@tanstack/solid-router';
import { render } from 'solid-js/web';
import './app.css';
@ -23,6 +28,18 @@ declare module '@tanstack/solid-router' {
// Render the app
const rootElement = document.getElementById('root');
const App = () => {
const storageManager = createLocalStorageManager('vite-ui-theme');
return (
<>
<ColorModeScript storageType={storageManager.type} />
<ColorModeProvider storageManager={storageManager}>
<RouterProvider router={router} />
</ColorModeProvider>
</>
);
};
if (rootElement && !rootElement.innerHTML) {
render(() => <RouterProvider router={router} />, rootElement);
render(() => <App />, rootElement);
}

19
apps/webui/src/routes/__root.tsx
View File

@ -1,16 +1,16 @@
import { Link, Outlet, createRootRoute } from '@tanstack/solid-router';
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuTrigger,
} from '~/components/ui/navigation-menu';
import { Outlet, createRootRoute } from '@tanstack/solid-router';
// import {
// NavigationMenu,
// NavigationMenuItem,
// NavigationMenuLink,
// NavigationMenuTrigger,
// } from '~/components/ui/navigation-menu';
export const Route = createRootRoute({
component: () => {
return (
<>
<div class="flex space-y-4">
{/* <div class="sticky inset-x-0 top-0 isolate z-10 flex shrink-0 items-center gap-2 border-b bg-background">
<NavigationMenu orientation="horizontal">
<NavigationMenuItem>
<NavigationMenuTrigger>
@ -25,8 +25,7 @@ export const Route = createRootRoute({
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenu>
</div>
<hr />
</div> */}
<Outlet />
</>
);

59
apps/webui/src/routes/index.tsx
View File

@ -1,13 +1,56 @@
import { createFileRoute } from '@tanstack/solid-router'
import { createFileRoute } from '@tanstack/solid-router';
import { AppSidebar } from '~/components/layout/app-sidebar';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from '~/components/ui/breadcrumb';
import { Separator } from '~/components/ui/separator';
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '~/components/ui/sidebar';
export const Route = createFileRoute('/')({
component: Index,
})
component: Home,
});
function Index() {
function Home() {
return (
<div class="p-2">
<h3>Welcome Home!</h3>
</div>
)
<SidebarProvider>
<AppSidebar />
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
<div class="flex items-center gap-2 px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbLink current>Data Fetching</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
<div class="aspect-video rounded-xl bg-muted/50" />
</div>
<div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
</div>
</SidebarInset>
</SidebarProvider>
);
}

2
package.json
View File

@ -27,7 +27,7 @@
"clsx": "^2.1.1",
"class-variance-authority": "^0.7.1",
"tailwind-merge": "^3.0.2",
"tailwindcss": "3.4.17",
"tailwindcss": "^4.0.9",
"tailwindcss-animate": "^1.0.7",
"@tanstack/router-devtools": "^1.112.6",
"@tanstack/react-router": "^1.112.0",

27
pnpm-lock.yaml generated
View File

@ -39,11 +39,11 @@ importers:
specifier: ^3.0.2
version: 3.0.2
tailwindcss:
specifier: 3.4.17
version: 3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2))
specifier: ^4.0.9
version: 4.0.9
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2)))
version: 1.0.7(tailwindcss@4.0.9)
devDependencies:
'@auto-it/all-contributors':
specifier: ^11.3.0
@ -178,6 +178,9 @@ importers:
'@solid-primitives/refs':
specifier: ^1.1.0
version: 1.1.0(solid-js@1.9.5)
'@tailwindcss/postcss':
specifier: ^4.0.9
version: 4.0.9
'@tanstack/solid-router':
specifier: ^1.112.2
version: 1.112.2(solid-js@1.9.5)
@ -190,6 +193,9 @@ importers:
embla-carousel-solid:
specifier: ^8.5.2
version: 8.5.2(solid-js@1.9.5)
lucide-solid:
specifier: ^0.477.0
version: 0.477.0(solid-js@1.9.5)
solid-js:
specifier: ^1.9.5
version: 1.9.5
@ -197,7 +203,7 @@ importers:
specifier: ^0.2.8
version: 0.2.8(solid-js@1.9.5)
tailwindcss:
specifier: 3.4.17
specifier: ^3
version: 3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2))
devDependencies:
'@rsbuild/plugin-solid':
@ -4268,6 +4274,11 @@ packages:
lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
lucide-solid@0.477.0:
resolution: {integrity: sha512-YshJtVmqCghkI0cur+/PgL48kXEhIh1fMLy6pDwex7heMqXS962eNcb/e+mIiTzSFsjg9r2dBKAWT9tX7Ci6mg==}
peerDependencies:
solid-js: ^1.4.7
magic-string@0.30.17:
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
@ -10440,6 +10451,10 @@ snapshots:
dependencies:
yallist: 3.1.1
lucide-solid@0.477.0(solid-js@1.9.5):
dependencies:
solid-js: 1.9.5
magic-string@0.30.17:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
@ -11595,9 +11610,9 @@ snapshots:
tailwind-merge@3.0.2: {}
tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2))):
tailwindcss-animate@1.0.7(tailwindcss@4.0.9):
dependencies:
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2))
tailwindcss: 4.0.9
tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.8)(typescript@5.8.2)):
dependencies: