import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import Block from '../../placeholders/Block'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Rectangle from '../../placeholders/Rectangle'; import Triangle from '../../placeholders/Triangle'; interface ItemProps { index: number; title: React.ReactNode; } const Details: React.FC<{}> = () => { const [activeItem, setActiveItem] = React.useState(-1); const Item: React.FC = ({ index, title, children }) => { const isOpened = index === activeItem; const click = () => setActiveItem(isOpened ? -1 : index); return ( <>
{title}
{children}
); }; return (
... ...
`} css={` .container { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .container__heading { display: flex; align-items: center; justify-content: space-between; } `} >
} >
} >
} > ); }; export default Details;