81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
import type { DeviceHeroProps } from '@/lib/types';
|
|
import { deviceTypeLabels } from '@/lib/devices/config';
|
|
|
|
export default function DeviceHero({ device }: DeviceHeroProps) {
|
|
const imageWidth = device.heroImage.width ?? 540;
|
|
const imageHeight = device.heroImage.height ?? 540;
|
|
|
|
const metadata = [
|
|
{
|
|
label: 'Type',
|
|
value: deviceTypeLabels[device.type],
|
|
},
|
|
device.releaseYear
|
|
? {
|
|
label: 'Release',
|
|
value: device.releaseYear.toString(),
|
|
}
|
|
: undefined,
|
|
device.status
|
|
? {
|
|
label: 'Status',
|
|
value: device.status,
|
|
}
|
|
: undefined,
|
|
device.codename
|
|
? {
|
|
label: 'Codename',
|
|
value: device.codename,
|
|
}
|
|
: undefined,
|
|
].filter(Boolean) as Array<{ label: string; value: string }>;
|
|
|
|
return (
|
|
<section className="grid grid-cols-1 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)] gap-8 xl:gap-12">
|
|
<div className="bg-gray-900/60 border border-gray-800 rounded-2xl p-6 md:p-8 backdrop-blur-sm space-y-6">
|
|
<div className="space-y-3">
|
|
<h1 className="text-3xl md:text-4xl font-semibold text-gray-100">
|
|
{device.name}
|
|
</h1>
|
|
{device.tagline ? (
|
|
<p className="text-base md:text-lg text-gray-400 max-w-2xl">{device.tagline}</p>
|
|
) : null}
|
|
</div>
|
|
|
|
{device.summary?.length ? (
|
|
<div className="space-y-3 text-sm md:text-base text-gray-400 leading-relaxed max-w-2xl">
|
|
{device.summary.map((paragraph, idx) => (
|
|
<p key={idx}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{metadata.length ? (
|
|
<dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 text-sm text-gray-400">
|
|
{metadata.map((item) => (
|
|
<div key={item.label} className="flex flex-col">
|
|
<dt className="uppercase text-xs tracking-wide text-gray-600">{item.label}</dt>
|
|
<dd className="font-medium text-gray-200">{item.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center">
|
|
<div className="w-full max-w-md rounded-2xl border border-gray-800 bg-gray-900/60 p-6 md:p-8 flex items-center justify-center">
|
|
<Image
|
|
src={device.heroImage.src}
|
|
alt={device.heroImage.alt}
|
|
width={imageWidth}
|
|
height={imageHeight}
|
|
className="w-full h-auto object-contain drop-shadow-lg"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|