feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx

@@ -0,0 +1,17 @@
+import styles from "./levelSummary.module.css"
+
+import type { LevelSummaryProps } from "@/types/components/overviewTable"
+
+export default function LevelSummary({
+  level,
+  showDescription = true,
+}: LevelSummaryProps) {
+  return (
+    <div className={styles.levelSummary}>
+      <span className={styles.levelRequirements}>{level.requirement}</span>
+      {showDescription && (
+        <p className={styles.levelSummaryText}>{level.description}</p>
+      )}
+    </div>
+  )
+}

components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -0,0 +1,35 @@
+.levelSummary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x3);
+  padding-bottom: var(--Spacing-x1);
+}
+
+.levelRequirements {
+  border-radius: var(--Corner-radius-Medium);
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  color: var(--Scandic-Peach-80);
+  padding: var(--Spacing-x-half) var(--Spacing-x5);
+}
+
+.levelSummaryText {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .levelRequirements {
+    padding: var(--Spacing-x-half) var(--Spacing-x1);
+  }
+}
+@media screen and (min-width: 1367px) {
+  .levelRequirements {
+    font-size: var(--typography-Footnote-Regular-fontSize);
+  }
+
+  .levelSummaryText {
+    font-size: var(--typography-Caption-Regular-fontSize);
+  }
+}