add

Author: sangam14

package-lock.json

@@ -40,6 +40,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "mdast-util-gfm": "^3.1.0",
     "next": "^14.2.0",
@@ -55,6 +57,7 @@
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^3.3.0",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.8.1",
     "typescript": "^5.4.5"

package.json

@@ -1,57 +1,71 @@
+'use client';
+
 import React, { useEffect, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils';
+
+const containerVariants = cva(
+  "container mx-auto transition-colors duration-300",
+  {
+    variants: {
+      maxWidth: {
+        sm: "max-w-screen-sm",
+        md: "max-w-screen-md",
+        lg: "max-w-screen-lg",
+        xl: "max-w-screen-xl",
+        "2xl": "max-w-screen-2xl",
+        full: "max-w-full",
+        prose: "max-w-prose",
+      },
+      padding: {
+        none: "px-0",
+        sm: "px-3 sm:px-4",
+        md: "px-4 sm:px-6 lg:px-8",
+        lg: "px-6 sm:px-10 lg:px-12",
+      },
+      withBackground: {
+        true: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      maxWidth: "lg",
+      padding: "md",
+      withBackground: false,
+    },
+  }
+);
 
-interface ContainerProps {
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
   children: React.ReactNode;
-  className?: string;
-  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'prose';
-  padding?: 'none' | 'sm' | 'md' | 'lg';
-  withBackground?: boolean;
 }
 
-const Container: React.FC<ContainerProps> = ({ 
-  children, 
-  className = '',
-  maxWidth = 'lg',
-  padding = 'md',
-  withBackground = false
-}) => {
+const Container = ({
+  children,
+  className,
+  maxWidth,
+  padding, 
+  withBackground,
+  ...props
+}: ContainerProps) => {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
+    return () => setMounted(false);
   }, []);
 
-  // Map maxWidth to tailwind classes
-  const maxWidthClasses = {
-    sm: 'max-w-screen-sm',
-    md: 'max-w-screen-md',
-    lg: 'max-w-screen-lg',
-    xl: 'max-w-screen-xl',
-    '2xl': 'max-w-screen-2xl',
-    full: 'max-w-full',
-    prose: 'max-w-prose'
-  };
-
-  // Map padding to tailwind classes
-  const paddingClasses = {
-    none: 'px-0',
-    sm: 'px-3 sm:px-4',
-    md: 'px-4 sm:px-6 lg:px-8',
-    lg: 'px-6 sm:px-10 lg:px-12'
-  };
-
-  const backgroundClasses = withBackground 
-    ? 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm' 
-    : '';
-
   return (
-    <div className={`
-      container mx-auto ${maxWidthClasses[maxWidth]} ${paddingClasses[padding]} 
-      ${backgroundClasses} transition-all duration-200 ease-in-out
-      ${mounted ? 'opacity-100' : 'opacity-0 translate-y-2'}
-      ${className}
-    `}>
-      <div className={`${withBackground ? 'p-4 sm:p-6' : ''}`}>
+    <div
+      className={cn(
+        containerVariants({ maxWidth, padding, withBackground }),
+        mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2",
+        "transition duration-300 ease-in-out",
+        className
+      )}
+      {...props}
+    >
+      <div className={withBackground ? "p-4 sm:p-6" : ""}>
         {children}
       </div>
     </div>

src/components/Container.tsx

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}