Styling of home

components/shared/Collapsible/Collapsible.tsx

@@ -0,0 +1,25 @@
+import { FC, PropsWithChildren } from 'react'
+import styles from './Collapsible.module.css'
+import cx from 'classnames'
+import typography from '../../../styles/typography.module.css'
+
+interface Props {
+  id: string
+  className?: string
+}
+
+export const Collapsible: FC<PropsWithChildren<Props>> = ({ id, className, children }) => {
+  return (
+    <div className={cx(styles.collapsible, className)}>
+      <input id={id} className={styles.toggle} type='checkbox' defaultChecked={true} />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label
+        htmlFor={id}
+        id={id}
+        className={cx(styles.label, typography.displaySmall)}
+        defaultChecked={true}
+      />
+      <div className={styles.content}>{children}</div>
+    </div>
+  )
+}