82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import React, {useState} from 'react';
|
||
import {motion, AnimatePresence} from 'framer-motion';
|
||
import {FiZap, FiMonitor, FiServer, FiTool} from 'react-icons/fi';
|
||
import Development from "@/components/Services/Section/overview/Development";
|
||
import Consulting from "@/components/Services/Section/overview/Consulting";
|
||
import ManagedServices from "@/components/Services/Section/overview/ManagedServices";
|
||
import BugFixing from "@/components/Services/Section/overview/BugFixing";
|
||
import {useThemeColors} from "@/utils/useThemeColors";
|
||
|
||
const tabs = [
|
||
{key: 'entwicklung', label: 'Entwicklung', icon: <FiZap size={20}/>},
|
||
{key: 'beratung', label: 'Beratung', icon: <FiMonitor size={20}/>},
|
||
{key: 'services', label: 'Managed Services', icon: <FiServer size={20}/>},
|
||
{key: 'support', label: 'Fehlerbehebung', icon: <FiTool size={20}/>},
|
||
];
|
||
|
||
const tabContent: Record<string, React.ReactNode> = {
|
||
entwicklung: <Development/>,
|
||
beratung: <Consulting/>,
|
||
services: <ManagedServices/>,
|
||
support: <BugFixing/>,
|
||
};
|
||
|
||
const OverviewTabs = () => {
|
||
const [activeTab, setActiveTab] = useState("entwicklung");
|
||
const colors = useThemeColors();
|
||
|
||
return (
|
||
<div className="max-w-5xl mx-auto px-6 py-16 transition-theme text-left">
|
||
<h2 className="text-3xl font-bold mb-2" style={{color: colors.primaryText}}>
|
||
Was wir tun
|
||
</h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mb-6 bg-amber-500"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
<p className="text-sm mb-10" style={{color: colors.secondaryText}}>
|
||
In diesem Abschnitt geben wir dir einen Überblick über unsere zentralen Leistungen – von der technischen
|
||
Entwicklung über Beratung bis hin zu Betrieb und Support.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-4 mb-10">
|
||
{tabs.map((tab) => (
|
||
<button
|
||
key={tab.key}
|
||
onClick={() => setActiveTab(tab.key)}
|
||
className="flex-1 min-w-[150px] flex items-center justify-start gap-2 px-4 py-2 rounded-full border text-sm font-medium transition-all"
|
||
style={{
|
||
color: activeTab === tab.key ? '#ffffff' : colors.primaryText,
|
||
backgroundColor: activeTab === tab.key ? '#1D4ED8' : 'transparent',
|
||
borderColor: activeTab === tab.key ? '#1D4ED8' : colors.inputBorder,
|
||
}}
|
||
>
|
||
{tab.icon}
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={activeTab}
|
||
initial={{opacity: 0, y: 10}}
|
||
animate={{opacity: 1, y: 0}}
|
||
exit={{opacity: 0, y: -10}}
|
||
transition={{duration: 0.4}}
|
||
>
|
||
{tabContent[activeTab]}
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default OverviewTabs;
|