feat(ui): drive mobile layouts from useIsMobile

This commit is contained in:
2026-04-21 22:46:07 -04:00
parent 16bbd9ab08
commit 7a917e5c22
16 changed files with 350 additions and 150 deletions

View File

@@ -1,16 +1,22 @@
import { cn } from "@/lib/utils";
export const APP_HEADER_SURFACE_CLASSES =
"mb-6 flex min-h-14 items-center justify-between gap-3 bg-background/95 px-4 py-3 shadow-[inset_0_-1px_0_0_var(--color-border)] sm:px-6";
export const getAppHeaderSurfaceClasses = (isMobile: boolean) =>
cn(
"mb-6 flex min-h-14 items-center justify-between gap-3 bg-background/95 py-3 shadow-[inset_0_-1px_0_0_var(--color-border)]",
isMobile ? "px-4" : "px-6",
);
export const APP_SECTION_SURFACE_CLASSES =
"rounded-[10px] bg-card px-4 py-4 shadow sm:px-5";
export const getAppSectionSurfaceClasses = (isMobile: boolean) =>
cn("rounded-[10px] bg-card py-4 shadow", isMobile ? "px-4" : "px-5");
export const APP_ACTION_BAR_CLASSES =
"rounded-[10px] bg-secondary px-3 py-3 shadow-sm";
export const APP_NAV_SURFACE_CLASSES =
"fixed inset-x-4 bottom-4 mx-auto flex max-w-3xl items-center justify-between rounded-[10px] bg-card/95 px-3 py-2 shadow-lg sm:inset-x-6 lg:hidden";
export const getAppNavSurfaceClasses = (isMobile: boolean) =>
cn(
"mx-auto max-w-3xl items-center justify-between rounded-[10px] bg-card/95 px-3 py-2 shadow-lg",
isMobile ? "fixed inset-x-4 bottom-4 flex" : "hidden",
);
const CONNECTION_BADGE_BASE_CLASSES =
"gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm";