45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProductTabsProps {
|
|
children: React.ReactNode;
|
|
technicalData?: React.ReactNode;
|
|
sidebar?: React.ReactNode;
|
|
}
|
|
|
|
export default function ProductTabs({ children, technicalData, sidebar }: ProductTabsProps) {
|
|
return (
|
|
<div className="space-y-24">
|
|
<div className="flex flex-col lg:flex-row gap-12 items-start">
|
|
<div className="flex-1 min-w-0">
|
|
{sidebar && (
|
|
<div className="lg:hidden mb-12">
|
|
{sidebar}
|
|
</div>
|
|
)}
|
|
<div className="max-w-none">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
{sidebar && (
|
|
<div className="hidden lg:block sticky top-32 w-[350px] xl:w-[400px] flex-shrink-0">
|
|
{sidebar}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{technicalData && (
|
|
<div className="pt-24 border-t-2 border-neutral-dark/5">
|
|
<div className="mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-black text-primary tracking-tighter uppercase mb-4">Technical Specifications</h2>
|
|
<div className="h-1.5 w-24 bg-accent rounded-full" />
|
|
</div>
|
|
<div className="not-prose">
|
|
{technicalData}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|