- {routes.map(({ href, label, icon }) => {
- const current = matchRoute({ ...href, fuzzy: true });
- const Icon = icon;
-
- return (
-
-
- {label}
-
- );
- })}
+
+
+ {label}
+ {count && {count}}
+
+ {children}
);
};
+
+interface NavProps {
+ children: React.ReactNode;
+}
+
+export const Nav = ({ children }: NavProps) => {
+ return
;
+};
diff --git a/src/components/StatusSelect/StatusSelect.tsx b/src/components/StatusSelect/StatusSelect.tsx
index d9b08a4..9479c24 100644
--- a/src/components/StatusSelect/StatusSelect.tsx
+++ b/src/components/StatusSelect/StatusSelect.tsx
@@ -2,6 +2,7 @@ import { STATUS, type Status } from "@convex/constants";
import { RiArrowDropDownFill } from "@remixicon/react";
import { useState } from "react";
import type { Selection } from "react-aria-components";
+import { tv } from "tailwind-variants";
import {
Badge,
type BadgeProps,
@@ -13,16 +14,31 @@ import {
interface StatusBadgeProps extends Omit
{
status: Status;
+ condensed?: boolean;
}
-export function StatusBadge({ status, ...props }: StatusBadgeProps) {
+const badgeStyles = tv({
+ base: "flex items-center transition-colors",
+ variants: {
+ condensed: {
+ true: "w-5 h-5 p-0",
+ },
+ },
+});
+
+export function StatusBadge({ status, condensed, ...props }: StatusBadgeProps) {
if (status === undefined) return null;
const { label, icon, variant } = STATUS[status];
return (
-
- {label}
+
+ {!condensed && label}
);
}
diff --git a/src/routes/_authenticated/_home.tsx b/src/routes/_authenticated/_home.tsx
index 5a439d4..acf90b4 100644
--- a/src/routes/_authenticated/_home.tsx
+++ b/src/routes/_authenticated/_home.tsx
@@ -1,18 +1,16 @@
import {
- Badge,
Button,
Container,
- Disclosure,
- DisclosureGroup,
- DisclosurePanel,
Empty,
- GridList,
- GridListItem,
Menu,
MenuItem,
MenuSection,
MenuTrigger,
+ Nav,
+ NavGroup,
+ NavItem,
ProgressBar,
+ StatusBadge,
Tooltip,
TooltipTrigger,
} from "@/components";
@@ -39,7 +37,6 @@ import { Outlet, createFileRoute } from "@tanstack/react-router";
import { Authenticated, Unauthenticated, useQuery } from "convex/react";
import { useEffect, useState } from "react";
import type { Selection } from "react-aria-components";
-import { twMerge } from "tailwind-merge";
export const Route = createFileRoute("/_authenticated/_home")({
component: IndexRoute,
@@ -123,13 +120,6 @@ function IndexRoute() {
/>
);
- const allCategoryKeys = [
- ...Object.values(CATEGORIES).map((category) => category.label),
- ...Object.values(STATUS).map((status) => status.label),
- ...Object.values(DATE_ADDED).map((date) => date.label),
- ...Object.values(TIME_UNITS).map((timeUnit) => timeUnit.label),
- ];
-
return (
@@ -160,11 +150,7 @@ function IndexRoute() {
Group by
-
+