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={` .accordion { /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); border-bottom-color: transparent; border-radius: 4px; } .accordion__item { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .accordion__header { /* Center the content horizontally */ align-items: center; display: flex; cursor: pointer; padding: 16px; } .accordion__toggle { margin-right: 12px; } .accordion__title { /* Take remaining width */ flex: 1; } .accordion__content { /* For not selected item */ display: none; border-top: 1px solid rgba(0, 0, 0, 0.3); padding: 16px; } .accordion__content--selected { /* For selected item */ display: block; } `} >
} >
} >
} >
); }; export default Details;