Add Container component and fix radius/maxWidth theming
- Drop buttonRadius prop; button now uses --radius via rounded-md - Inject @theme radius mappings into ThemeProvider so rounded-* utilities pick up --radius inside the Tailwind CDN iframe - Add shared Container that consumes --container-max-width set from the global maxWidth prop, replacing ad-hoc "container mx-auto max-w-7xl px-6" wrappers across commerce, landing, footer, navigation, and others - Simplify maxWidth options to Small/Medium/Large/X-Large/Full bleed and shift the scale up so Large (1280px) matches the previous default Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
21
components/layout/Container.tsx
Normal file
21
components/layout/Container.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type ContainerProps = React.HTMLAttributes<HTMLElement> & {
|
||||
as?: React.ElementType;
|
||||
};
|
||||
|
||||
export function Container({
|
||||
as: Comp = "div",
|
||||
className,
|
||||
style,
|
||||
...props
|
||||
}: ContainerProps) {
|
||||
return (
|
||||
<Comp
|
||||
className={cn("mx-auto w-full px-6", className)}
|
||||
style={{ maxWidth: "var(--container-max-width, 80rem)", ...style }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user