design system token v0.1

components/ui/section.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const sectionVariants = cva('py-16', {
+  variants: {
+    variant: {
+      default: '',
+      highlighted: 'bg-muted',
+      accent: 'bg-primary/5',
+    },
+    width: {
+      narrow: 'max-w-3xl mx-auto',
+      default: 'max-w-5xl mx-auto',
+      wide: 'max-w-7xl mx-auto',
+      full: 'w-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    width: 'default',
+  },
+})
+
+interface SectionProps
+  extends React.ComponentProps<'section'>,
+    VariantProps<typeof sectionVariants> {
+  title?: string
+  description?: string
+}
+
+function Section({
+  className,
+  variant,
+  width,
+  title,
+  description,
+  children,
+  ...props
+}: SectionProps) {
+  return (
+    <section
+      data-slot="section"
+      className={cn(sectionVariants({ variant, width, className }))}
+      {...props}
+    >
+      <div className="px-6">
+        {(title || description) && (
+          <div className="mb-8">
+            {title && (
+              <h2 className="font-serif text-3xl font-semibold tracking-tight mb-3">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-muted-foreground font-sans text-base max-w-2xl">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export { Section, sectionVariants }