Styling of home

components/shared/Collapsible/Collapsible.module.css

@@ -0,0 +1,58 @@
+.collapsible {
+    position: relative;
+}
+
+.toggle {
+    display: none;
+}
+
+.label {
+    position: absolute;
+    z-index: 100;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+}
+
+.label::before {
+    display: block;
+    width: 1em;
+    height: 1em;
+    border: 1px solid var(--md-ref-palette-neutral-variant80);
+    border-radius: 4px;
+    content: "-";
+    font-size: 0.5em;
+    line-height: 1em;
+    margin-block-start: 0.5em;
+    text-align: center;
+}
+
+.content {
+    position: relative;
+    overflow: hidden;
+    max-height: 100vh;
+    transition: max-height 0.25s ease-in;
+}
+
+.content::after {
+    position: absolute;
+    height: 3em;
+    background: linear-gradient(to bottom, rgba(0 0 0 / 0%) 0%, var(--color-bg) 100%);
+    content: "";
+    inset-block-end: 0;
+    inset-inline: 0;
+    pointer-events: none;
+    transition: height 0.25s ease-in-out;
+}
+
+.toggle:checked + .label::before {
+    content: "+";
+}
+
+.toggle:not(:checked) + .label + .content::after {
+    height: 0;
+}
+
+.toggle:checked + .label + .content {
+    max-height: 5em;
+    transition: max-height 0.25s ease-out;
+}

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>
+  )
+}