feat(ui): drive mobile layouts from useIsMobile
This commit is contained in:
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user