@conduction/docusaurus-preset 0.1.0

package/src/components/AppMock/variants/NLDesignMock.jsx

@@ -0,0 +1,70 @@
+/**
+ * NLDesign abstract — theme settings panel.
+ *
+ * Inferred from the app role (NL Design System theme for Nextcloud):
+ * centre shows a settings layout with a colour-swatch row, a type
+ * specimen, and a component preview block. Left nav for theme /
+ * colours / typography / spacing / components / overrides.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function NLDesignMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.openregister].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          {/* Colour-swatch panel */}
+          <div className={styles.panel}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
+              {['var(--c-blue-cobalt)','var(--c-orange-knvb)','var(--c-mint-500)','var(--c-lavender-500)','var(--c-forest-500)','var(--c-terracotta-500)','var(--c-cobalt-300)','var(--c-cobalt-100)'].map((bg, i) => (
+                <span key={i} style={{width: 22, height: 22, borderRadius: 4, background: bg}}></span>
+              ))}
+            </div>
+          </div>
+          {/* Type specimen */}
+          <div className={styles.panel}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div style={{display: 'flex', alignItems: 'baseline', gap: 8}}>
+              <div style={{height: 14, width: 18, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
+              <div style={{height: 11, width: 14, background: 'var(--c-cobalt-700)', borderRadius: 1}}></div>
+              <div style={{height: 8,  width: 12, background: 'var(--c-cobalt-400)', borderRadius: 1}}></div>
+              <div style={{height: 6,  width: 10, background: 'var(--c-cobalt-300)', borderRadius: 1}}></div>
+              <div style={{height: 4,  width: 8,  background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
+            </div>
+            <div className={styles.row}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+          </div>
+          {/* Component preview */}
+          <div className={styles.panel}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
+              <div className={styles.btn}></div>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.statusPill}><div className={styles.h}></div><div className={styles.t}></div></div>
+              <div className={[styles.statusPill, styles.beta].join(' ')}><div className={styles.h}></div><div className={styles.t}></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/OpenCatalogiMock.jsx

@@ -0,0 +1,61 @@
+/**
+ * OpenCatalogi abstract — federated catalogue grid.
+ *
+ * Inferred from the app description ("publication catalogue, federated
+ * search across registers"): centre is a 3×2 grid of catalogue cards,
+ * each with a hex glyph in a different family colour to signal the
+ * categorical mix. Left nav for catalogues / publications / sources.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function OpenCatalogiMock() {
+  const cards = ['', 'b', 'c', 'd', 'e', ''];
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}>
+            <div className={styles.h}></div><div className={styles.l}></div>
+          </div>
+          {[true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: 30}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.grid}>
+            {cards.map((cls, i) => (
+              <div key={i} className={[styles.card, cls && styles[cls]].filter(Boolean).join(' ')}>
+                <div className={styles.ico}></div>
+                <div className={styles.row + ' ' + styles.head}></div>
+                <div className={styles.row}></div>
+                <div className={styles.row + ' ' + styles.short}></div>
+                <div className={styles.statusPill}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/OpenConnectorMock.jsx

@@ -0,0 +1,83 @@
+/**
+ * OpenConnector abstract — source-connector-target pipeline view.
+ *
+ * Inferred from the app's role ("integration plane between Conduction
+ * apps and external APIs"): the centre stage shows a single canonical
+ * pipeline (lavender source → cobalt connector → forest target), with
+ * a status table below for recent runs. Left nav for sources, jobs,
+ * mappings, sync logs, schedules.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function OpenConnectorMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.openconnector].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}>
+            <div className={styles.h}></div><div className={styles.l}></div>
+          </div>
+          {[false, true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: 30}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.stage}>
+            <div className={styles.source}>
+              <div className={styles.ico}></div>
+              <div className={styles.row + ' ' + styles.short}></div>
+            </div>
+            <div className={styles.arrow}></div>
+            <div className={styles.conn}>
+              <div className={styles.ico}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={styles.arrow}></div>
+            <div className={styles.target}>
+              <div className={styles.ico}></div>
+              <div className={styles.row + ' ' + styles.short}></div>
+            </div>
+          </div>
+          <div className={styles.panel}>
+            <div className={styles.head}>
+              <div className={styles.title}></div>
+              <div className={styles.statusPill}>
+                <div className={styles.h}></div><div className={styles.t}></div>
+              </div>
+            </div>
+            <div className={styles.stack}>
+              {['a','d','b','c'].map((cls, i) => (
+                <div key={i} className={styles.item}>
+                  <div className={[styles.av, styles[cls]].join(' ')}></div>
+                  <div className={styles.lines}>
+                    <div className={styles.l1}></div>
+                    <div className={styles.l2}></div>
+                  </div>
+                  <div className={styles.row + ' ' + styles.short} style={{width: 24}}></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/OpenRegisterMock.jsx

@@ -0,0 +1,100 @@
+/**
+ * OpenRegister abstract — three-pane admin: left nav + centre dashboard
+ * + right detail rail. Reference: localhost:8080/apps/openregister.
+ *
+ * Centre is the canonical "Dashboard" view: KPI strip top, two
+ * side-by-side tables ("Popular Search Terms" / "Objects by Register"),
+ * second row of two more. Right rail shows Filter Statistics + Totals.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function OpenRegisterMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.openregister].filter(Boolean).join(' ')}>
+        {/* Left nav */}
+        <div className={styles.nav}>
+          <div className={styles.navHead}>
+            <div className={styles.h}></div>
+            <div className={styles.l}></div>
+          </div>
+          {[true, false, false, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        {/* Centre */}
+        <div className={styles.col}>
+          {/* KPI strip */}
+          <div className={styles.kpiRow}>
+            <div className={styles.kpi}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={[styles.kpi, styles.forest].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={[styles.kpi, styles.amber].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={[styles.kpi, styles.lavender].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+          </div>
+          {/* Two rows × two tables */}
+          <div className={styles.panelRow}>
+            <div className={styles.panel}>
+              <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={styles.stack}>
+                {[0,1,2].map(i => (
+                  <div key={i} className={styles.item}>
+                    <div className={styles.lines}><div className={styles.l1}></div></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className={styles.panel}>
+              <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={styles.stack}>
+                {['b','d','c','a'].map((cls, i) => (
+                  <div key={i} className={styles.item}>
+                    <div className={[styles.av, styles[cls]].join(' ')}></div>
+                    <div className={styles.lines}><div className={styles.l1}></div></div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Right detail rail */}
+        <div className={styles.detail}>
+          <div className={styles.row + ' ' + styles.head}></div>
+          <div className={styles.row}></div>
+          <div className={styles.row + ' ' + styles.short}></div>
+          <div style={{height: 8}}></div>
+          <div className={styles.row + ' ' + styles.head}></div>
+          <div className={styles.row + ' ' + styles.dark}></div>
+          <div className={styles.row}></div>
+          <div className={styles.row}></div>
+          <div className={styles.row + ' ' + styles.short}></div>
+          <div className={styles.row + ' ' + styles.accent}></div>
+          <div className={styles.row + ' ' + styles.short}></div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/OpenWooMock.jsx

@@ -0,0 +1,61 @@
+/**
+ * OpenWoo abstract — Woo publication catalogue.
+ *
+ * Inferred from the app role (eleven Woo categories, citizen-search,
+ * audit log, federation to data.overheid.nl): centre shows a 3×2 grid
+ * of category cards (each in a different family colour because the
+ * eleven categories are categorical, not ranked) with publish counts
+ * and status pills. Left nav for categories / publication queue /
+ * archive / audit / federation.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function OpenWooMock() {
+  const cards = ['', 'b', 'c', 'd', 'e', 'b'];
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.grid}>
+            {cards.map((cls, i) => (
+              <div key={i} className={[styles.card, cls && styles[cls]].filter(Boolean).join(' ')}>
+                <div className={styles.ico}></div>
+                <div className={styles.row + ' ' + styles.head}></div>
+                <div className={styles.row}></div>
+                <div className={styles.row + ' ' + styles.short}></div>
+                <div className={styles.statusPill}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/PipelinQMock.jsx

@@ -0,0 +1,88 @@
+/**
+ * PipelinQ abstract — sales kanban + KPI strip.
+ *
+ * Inferred from the app role (CRM with kanban deal-flow, customers,
+ * deals, quotes): centre shows the kanban board with five columns
+ * (lead, qualified, proposal, won, lost) plus a KPI strip on top
+ * (pipeline value, win rate, deals this week). Left nav for kanban /
+ * customers / contacts / deals / quotes.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function PipelinQMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.kpiRow}>
+            <div className={[styles.kpi, styles.lavender].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={styles.kpi}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={[styles.kpi, styles.amber].join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+          </div>
+          {/* Kanban board (5 columns) */}
+          <div className={[styles.w, styles['w-decks']].join(' ')} style={{flex: 1}}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.columns} style={{gridTemplateColumns: 'repeat(5, 1fr)'}}>
+              <div className={styles.col}>
+                <div className={styles.card}></div>
+                <div className={styles.card}></div>
+                <div className={styles.card}></div>
+              </div>
+              <div className={styles.col}>
+                <div className={[styles.card, styles.b].join(' ')}></div>
+                <div className={styles.card}></div>
+              </div>
+              <div className={styles.col}>
+                <div className={[styles.card, styles.c].join(' ')}></div>
+                <div className={styles.card}></div>
+                <div className={styles.card}></div>
+              </div>
+              <div className={styles.col}>
+                <div className={[styles.card, styles.c].join(' ')}></div>
+              </div>
+              <div className={styles.col}>
+                <div className={styles.card}></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/ProcestMock.jsx

@@ -0,0 +1,87 @@
+/**
+ * Procest abstract — case management with process timeline.
+ *
+ * Inferred from app role (ZGW case-management for VTH and citizen
+ * processes): centre shows a canonical case detail with the timeline
+ * of stages running across the top (one done, one active, three to-do)
+ * plus a list of recent cases below. Left nav for cases, types,
+ * roles, decisions, archive.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function ProcestMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.procest].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}>
+            <div className={styles.h}></div><div className={styles.l}></div>
+          </div>
+          {[true, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: 35}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.timeline}>
+            <div className={styles.step}>
+              <div className={styles.h}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.step, styles.now].join(' ')}>
+              <div className={styles.h}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.step, styles.todo].join(' ')}>
+              <div className={styles.h}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.step, styles.todo].join(' ')}>
+              <div className={styles.h}></div>
+              <div className={styles.label}></div>
+            </div>
+            <div className={[styles.step, styles.todo].join(' ')}>
+              <div className={styles.h}></div>
+              <div className={styles.label}></div>
+            </div>
+          </div>
+          <div className={styles.panel}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div className={styles.stack}>
+              {['a','b','d','c','a'].map((cls, i) => (
+                <div key={i} className={styles.item}>
+                  <div className={[styles.av, styles[cls]].join(' ')}></div>
+                  <div className={styles.lines}>
+                    <div className={styles.l1}></div>
+                    <div className={styles.l2}></div>
+                  </div>
+                  <div className={[styles.statusPill, i === 1 && styles.beta].filter(Boolean).join(' ')}>
+                    <div className={styles.h}></div><div className={styles.t}></div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/SoftwareCatalogMock.jsx

@@ -0,0 +1,71 @@
+/**
+ * SoftwareCatalog abstract — IT-asset inventory list.
+ *
+ * Inferred from the app role (software inventory, licences, contracts,
+ * dependencies): centre shows a tabular app list with status pips
+ * (mint = stable, orange = update available, red = end-of-life) plus
+ * a graph card on top showing licence-renewal timeline. Left nav for
+ * apps / licences / contracts / dependencies / discovery / archive.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function SoftwareCatalogMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.openregister].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          {/* Licence-renewal timeline (bar chart with one accent) */}
+          <div className={[styles.w, styles['w-graph-bar']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.bars}>
+              <div className={styles.bar} style={{height: '30%'}}></div>
+              <div className={styles.bar} style={{height: '50%'}}></div>
+              <div className={styles.bar} style={{height: '40%'}}></div>
+              <div className={styles.bar} style={{height: '70%'}}></div>
+              <div className={[styles.bar, styles.accent].join(' ')} style={{height: '88%'}}></div>
+              <div className={styles.bar} style={{height: '60%'}}></div>
+              <div className={styles.bar} style={{height: '45%'}}></div>
+              <div className={styles.bar} style={{height: '38%'}}></div>
+            </div>
+            <div className={styles.axis}></div>
+          </div>
+          {/* App list with status pips */}
+          <div className={[styles.w, styles['w-jira']].join(' ')}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div className={styles.list}>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}