119 lines
4.9 KiB
TypeScript
119 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Product } from '@/types/types';
|
|
import { Star } from 'lucide-react';
|
|
|
|
interface TabsProps {
|
|
product: Product;
|
|
}
|
|
|
|
export function Tabs({ product }: TabsProps) {
|
|
const [activeTab, setActiveTab] = useState<'opis' | 'dane' | 'opinie'>('opis');
|
|
|
|
return (
|
|
<div className="mt-16 bg-white rounded-3xl border border-border overflow-hidden">
|
|
{/* Nawigacja */}
|
|
<div className="flex border-b border-border">
|
|
{(['opis', 'dane', 'opinie'] as const).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`flex-1 py-4 text-sm md:text-base font-bold uppercase tracking-wider transition-colors ${
|
|
activeTab === tab
|
|
? 'bg-slate-50 text-primary border-b-2 border-primary'
|
|
: 'bg-white text-text-muted hover:bg-slate-50 hover:text-primary'
|
|
}`}
|
|
>
|
|
{tab === 'opis' && 'Opis produktu'}
|
|
{tab === 'dane' && 'Dane techniczne'}
|
|
{tab === 'opinie' && 'Opinie'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Zawartość */}
|
|
<div className="p-8 md:p-12">
|
|
{/* Opis */}
|
|
{activeTab === 'opis' && (
|
|
<div className="prose prose-slate max-w-none">
|
|
<h3 className="text-2xl font-bold text-primary font-heading mb-4">Szczegółowe informacje</h3>
|
|
<p className="text-lg text-text-muted leading-relaxed">
|
|
{product.description}
|
|
</p>
|
|
{product.heating && (
|
|
<p className="mt-4 font-semibold text-accent">
|
|
Ten model posiada funkcję efektywnego ogrzewania, dzięki czemu sprawdzi się doskonale jako dodatkowe źródło ciepła w okresach przejściowych lub główny system grzewczy dla wybranych pomieszczeń.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Dane techniczne */}
|
|
{activeTab === 'dane' && (
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-primary font-heading mb-6">Specyfikacja techniczna</h3>
|
|
{product.specs ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<tbody>
|
|
{Object.entries(product.specs).map(([key, value], idx) => (
|
|
<tr key={idx} className="border-b border-border hover:bg-slate-50 transition-colors">
|
|
<th className="py-4 px-4 font-semibold text-primary w-1/2">{key}</th>
|
|
<td className="py-4 px-4 text-text-muted w-1/2">{value as React.ReactNode}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p className="text-text-muted">Brak szczegółowych danych technicznych dla tego modelu.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Opinie */}
|
|
{activeTab === 'opinie' && (
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<div className="text-4xl font-extrabold text-primary font-heading">4.9</div>
|
|
<div className="flex flex-col">
|
|
<div className="flex text-yellow-400">
|
|
<Star className="w-5 h-5 fill-current" />
|
|
<Star className="w-5 h-5 fill-current" />
|
|
<Star className="w-5 h-5 fill-current" />
|
|
<Star className="w-5 h-5 fill-current" />
|
|
<Star className="w-5 h-5 fill-current" />
|
|
</div>
|
|
<span className="text-sm text-text-muted font-medium mt-1">Na podstawie 12 opinii</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Przykładowa opinia */}
|
|
<div className="p-6 bg-slate-50 rounded-2xl border border-border">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div>
|
|
<span className="font-bold text-primary">Janusz z Wrocławia</span>
|
|
<span className="text-xs text-text-muted block mt-0.5">Potwierdzony zakup z montażem</span>
|
|
</div>
|
|
<div className="flex text-yellow-400">
|
|
<Star className="w-4 h-4 fill-current" />
|
|
<Star className="w-4 h-4 fill-current" />
|
|
<Star className="w-4 h-4 fill-current" />
|
|
<Star className="w-4 h-4 fill-current" />
|
|
<Star className="w-4 h-4 fill-current" />
|
|
</div>
|
|
</div>
|
|
<p className="text-text-muted text-sm leading-relaxed">
|
|
Sprzęt najwyższej klasy. Bardzo cichy, w ogóle go nie słychać w sypialni. Montaż wykonany przez panów z AirProject przebiegł super szybko i czyściutko. Polecam!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|