Update package dependencies, implement theme provider in layout, and refine component styles for improved responsiveness

2025-03-18 18:27:35 +03:30 · 2025-03-18 18:27:35 +03:30 · ef3b0c9997
commit ef3b0c9997
parent 73112f6680
13 changed files with 168 additions and 22 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -141,7 +141,7 @@ body {
  background: url("../public/pattern.svg"),
    linear-gradient(rgba(58, 58, 58, 1) 0%, rgba(10, 10, 10, 1) 15%);
  background-blend-mode: color-burn;
-  background-size: 20%;
+  background-size: 22%;
 }

 .bg-parch {
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -3,6 +3,7 @@ import Header from "@/components/header";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";

 const Vazir = localFont({
  src: [
@ -33,9 +34,16 @@ export default function RootLayout({
        className={`${Vazir.className} antialiased`}
        suppressHydrationWarning
      >
-        <Header />
-        {children}
-        <FooterSection />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          {children}
+          <FooterSection />
+        </ThemeProvider>
      </body>
    </html>
  );
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/about-podcast.tsx
+++ b/components/about-podcast.tsx
@ -2,7 +2,7 @@ import Image from "next/image";

 export function AboutPodcast() {
  return (
-    <section className="container bg-muted/50 py-12 md:py-16 lg:py-20">
+    <section className="backdrop-blur-xs py-12 md:py-16 lg:py-20">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-[400px_1fr] lg:gap-12 xl:grid-cols-[450px_1fr]">
          <div className="space-y-4 ml-auto">
--- a/components/episode-cards.tsx
+++ b/components/episode-cards.tsx
@ -44,9 +44,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {

  return (
    <section
-      className={`${
-        section === "main" ? "container py-12 md:py-16 lg:py-20" : ""
-      }`}
+      className={`${section === "main" ? "py-12 md:py-16 lg:py-20" : ""}`}
    >
      <div className={`${section === "main" ? "container px-4 md:px-6" : ""}`}>
        <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
--- a/components/footer-section.tsx
+++ b/components/footer-section.tsx
@ -1,10 +1,11 @@
 import { Github, Instagram, Twitter, Youtube } from "lucide-react";
 import Image from "next/image";
 import { Footer, FooterBottom, FooterColumn, FooterContent } from "./ui/footer";
+import Link from "next/link";

 export default function FooterSection() {
  return (
-    <footer className="w-full bg-background px-4">
+    <footer className="w-full bg-background">
      <div className="mx-auto">
        <Footer>
          <FooterContent className="container">
@ -48,18 +49,30 @@ export default function FooterSection() {
                می‌شود که شما را به دنبال کردن آن‌ها دعوت می‌کنیم.
              </span>
              <div className="flex gap-4">
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                  <Github size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                  <Twitter size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                  <Instagram size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                  <Youtube size={16} />
-                </div>
+                </Link>
              </div>
            </FooterColumn>
          </FooterContent>
--- a/components/header.tsx
+++ b/components/header.tsx
@ -4,6 +4,8 @@ import { Button } from "@/components/ui/button";
 import { Menu, Search } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+import ToggleLanguage from "./toggle-language";

 export default function Header() {
  return (
@ -18,6 +20,8 @@ export default function Header() {
            <Search />
            جستجو
          </Button>
+          <ModeToggle />
+          <ToggleLanguage />
        </div>
        <Link href={"/"} className="hidden sm:flex items-center">
          <Image src={"/logo.png"} width={30} height={30} alt="logo" />
--- a/components/mode-toggle.tsx
+++ b/components/mode-toggle.tsx
@ -0,0 +1,39 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/components/podcast-hero.tsx
+++ b/components/podcast-hero.tsx
@ -4,7 +4,7 @@ import Image from "next/image";

 export function PodcastHero() {
  return (
-    <section className="container relative pt-20 pb-16 md:pt-36 md:pb-24">
+    <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_450px]">
          <div className="flex flex-col justify-center space-y-4">
--- a/components/subscribe-section.tsx
+++ b/components/subscribe-section.tsx
@ -4,7 +4,7 @@ import { Headphones, Mail } from "lucide-react";

 export function SubscribeSection() {
  return (
-    <section className="container py-12 md:py-16 lg:py-20 border-b">
+    <section className="py-12 md:py-16 lg:py-20 border-b">
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <div className="flex justify-center">
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/components/toggle-language.tsx
+++ b/components/toggle-language.tsx
@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export default function ToggleLanguage() {
+  return (
+    <DropdownMenu dir="rtl">
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <GlobeIcon className="h-4 w-4" />
+          <span>فارسی</span>
+          <ChevronDownIcon className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[180px]">
+        <DropdownMenuLabel>انتخاب زبان</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup dir="ltr" defaultValue="en">
+          <DropdownMenuRadioItem value="en">English</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="fa">فارسی</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+function GlobeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}
--- a/package.json
+++ b/package.json
@ -17,8 +17,9 @@
    "@radix-ui/react-slot": "^1.1.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-react": "^0.482.0",
-    "next": "15.2.2",
+    "lucide-react": "^0.483.0",
+    "next": "15.2.3",
+    "next-themes": "^0.4.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
@ -32,7 +33,7 @@
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
-    "eslint-config-next": "15.2.2",
+    "eslint-config-next": "15.2.3",
    "@eslint/eslintrc": "^3"
  }
 }