ayrisdev/mugladijitalmedya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dynamic service regions column to footer for better site architecture

Browse Source
This commit is contained in:
AyrisAI
2026-05-16 01:01:54 +03:00
parent b6f579726f
commit 40849ea0a8
1 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/Footer.tsx
View File

@@ -1,19 +1,24 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getSettings } from "@/app/actions"; import { getSettings, getLocations } from "@/app/actions";
import Link from "next/link"; import Link from "next/link";
import DynamicLogo from "./DynamicLogo"; import DynamicLogo from "./DynamicLogo";
export default function Footer() { export default function Footer() {
const [settings, setSettings] = useState<any>(null); const [settings, setSettings] = useState<any>(null);
const [locations, setLocations] = useState<any[]>([]);
useEffect(() => { useEffect(() => {
async function fetchSettings() { async function fetchData() {
const data = await getSettings(); const [sData, lData] = await Promise.all([
if (data) setSettings(data); getSettings(),
getLocations()
]);
if (sData) setSettings(sData);
if (lData) setLocations(lData);
} }
fetchSettings(); fetchData();
}, []); }, []);
return ( return (
@@ -23,7 +28,7 @@ export default function Footer() {
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8"> <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">
{/* Left Column - Logo & Description */} {/* Left Column - Logo & Description */}
<div className="md:col-span-5 flex flex-col justify-between gap-12"> <div className="md:col-span-4 flex flex-col justify-between gap-12">
{/* Logo */} {/* Logo */}
<Link href="/" className="inline-block"> <Link href="/" className="inline-block">
<div className="relative w-40 h-12"> <div className="relative w-40 h-12">
@@ -43,6 +48,22 @@ export default function Footer() {
</p> </p>
</div> </div>
{/* Regions Column - Dynamic districts */}
<div className="md:col-span-2 flex flex-col gap-6">
<span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
<div className="flex flex-col gap-2">
{locations.map((loc) => (
<Link
key={loc.id}
href={`/services?region=${loc.slug}`}
className="text-[11px] font-bold uppercase hover:text-primary transition-colors"
>
{loc.name}
</Link>
))}
</div>
</div>
{/* Center Column - Menu label + divider */} {/* Center Column - Menu label + divider */}
<div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex"> <div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex">
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
@@ -52,7 +73,7 @@ export default function Footer() {
</div> </div>
{/* Right Column - Navigation Links */} {/* Right Column - Navigation Links */}
<div className="md:col-span-5 flex flex-col items-start md:items-end gap-3"> <div className="md:col-span-4 flex flex-col items-start md:items-end gap-3">
{[ {[
{ label: "Çalışmalar", href: "/works" }, { label: "Çalışmalar", href: "/works" },
{ label: "Hizmetler", href: "/services" }, { label: "Hizmetler", href: "/services" },
@@ -63,7 +84,7 @@ export default function Footer() {
<Link <Link
key={item.label} key={item.label}
href={item.href} href={item.href}
className="text-2xl md:text-4xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight" className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight"
> >
{item.label} {item.label}
</Link> </Link>