feat(ui): add Container component and replace manual container divs

Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.
This commit is contained in:
joyzhao
2025-06-19 18:10:49 +08:00
parent b4a8d13cdd
commit 5fcf7a9d33
12 changed files with 97 additions and 46 deletions

View File

@@ -1,6 +1,7 @@
import { personalInfo } from "@/lib/data";
import LanguageSwitcher from "./LanguageSwitcher";
import ThemeToggle from "./ui/theme-toggle";
import Container from "./ui/Container";
import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
@@ -43,7 +44,7 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20'
: 'bg-transparent'
}`}>
<div className="container max-w-4xl mx-auto p-4 flex justify-between items-center">
<Container size="sm" className="p-4 flex justify-between items-center">
<a
className="flex items-center text-lg font-medium transition-opacity duration-150 hover:opacity-80"
href={getLocalizedPath('/', lang)}
@@ -85,7 +86,7 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
</Container>
{/* Mobile Navigation */}
<div className={`md:hidden overflow-hidden transition-all duration-200 ease-out ${