diff --git a/components/ContentType/LoyaltyPage/index.tsx b/components/ContentType/LoyaltyPage/index.tsx index c63f9d3e3..d28a3640c 100644 --- a/components/ContentType/LoyaltyPage/index.tsx +++ b/components/ContentType/LoyaltyPage/index.tsx @@ -27,7 +27,7 @@ export default async function LoyaltyPage() { ) : null} - +
{loyaltyPage.heading} diff --git a/components/Intro/index.tsx b/components/Intro/index.tsx index 5ad4db448..6c7a8a30d 100644 --- a/components/Intro/index.tsx +++ b/components/Intro/index.tsx @@ -1,20 +1,11 @@ import { PropsWithChildren } from "react" -import MaxWidth from "@/components/MaxWidth" - import styles from "./intro.module.css" export default async function Intro({ children }: PropsWithChildren) { return ( - - - {children} - - +
+
{children}
+
) } diff --git a/components/Intro/intro.module.css b/components/Intro/intro.module.css index f64d9daaa..5471f9aaa 100644 --- a/components/Intro/intro.module.css +++ b/components/Intro/intro.module.css @@ -1,3 +1,8 @@ +.intro { + max-width: 74.75rem; + margin: 0 auto; +} + .content { display: grid; gap: var(--Spacing-x2); diff --git a/components/MaxWidth/index.tsx b/components/MaxWidth/index.tsx index 0047d0dd2..495447a76 100644 --- a/components/MaxWidth/index.tsx +++ b/components/MaxWidth/index.tsx @@ -1,21 +1,17 @@ "use client" +import { cva } from "class-variance-authority" -import { maxWidthVariants } from "./variants" +import styles from "./maxWidth.module.css" import type { MaxWidthProps } from "@/types/components/max-width" +const maxWidthVariants = cva(styles.container) + export default function MaxWidth({ className, tag = "section", - variant, - align, ...props }: MaxWidthProps) { const Cmp = tag - return ( - - ) + return } diff --git a/components/MaxWidth/maxWidth.module.css b/components/MaxWidth/maxWidth.module.css index d13a093bd..563ae5721 100644 --- a/components/MaxWidth/maxWidth.module.css +++ b/components/MaxWidth/maxWidth.module.css @@ -1,21 +1,4 @@ .container { - position: relative; - max-width: 100%; - width: 100%; -} - -.container.default { max-width: var(--max-width, 1140px); -} - -.container.text { - max-width: 49.5rem; -} - -.container.content { - max-width: 74.75rem; -} - -.container.center { - margin: 0 auto; + position: relative; } diff --git a/components/MaxWidth/variants.ts b/components/MaxWidth/variants.ts deleted file mode 100644 index f7c917b5f..000000000 --- a/components/MaxWidth/variants.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./maxWidth.module.css" - -export const maxWidthVariants = cva(styles.container, { - variants: { - variant: { - text: styles.text, - content: styles.content, - default: styles.default, - }, - align: { - center: styles.center, - left: styles.left, - }, - }, - defaultVariants: { - variant: "default", - align: "center", - }, -}) diff --git a/types/components/max-width.ts b/types/components/max-width.ts index 4a99b2d99..e1327b581 100644 --- a/types/components/max-width.ts +++ b/types/components/max-width.ts @@ -1,9 +1,3 @@ -import { VariantProps } from "class-variance-authority" - -import { maxWidthVariants } from "@/components/MaxWidth/variants" - -export interface MaxWidthProps - extends React.HTMLAttributes, - VariantProps { +export interface MaxWidthProps extends React.HTMLAttributes { tag?: "article" | "div" | "main" | "section" }