import * as React from 'react'; import Head from 'next/head'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; interface TabProps { tabIndex: number; } const Details: React.FC<{}> = () => { const [activeTab, setActiveTab] = React.useState(0); const Tab: React.FC = ({ tabIndex, children }) => { const isActive = tabIndex === activeTab; const click = () => setActiveTab(tabIndex); return (

{children}

); }; return (

...

`} css={` .tabs { /* Center the content */ align-items: center; display: flex; justify-content: center; } .tabs__tab--active { /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); /* Hide the bottom border */ border-bottom-color: transparent; /* Border radius */ border-top-left-radius: 2px; border-top-right-radius: 2px; } .tabs__tab--inactive { /* Has only the bottom border */ border-bottom: 1px solid rgba(0, 0, 0, 0.3); } `} >

); }; export default Details;