refactor: organize css

2024-05-28 12:36:13 +02:00
parent f68b184d93
commit 1aa3b39c17
11 changed files with 243 additions and 262 deletions
@@ -0,0 +1,15 @@
+import Image from "@/components/Image"
+
+import styles from "./levelSummary.module.css"
+
+import { LevelSummaryProps } from "@/types/components/loyalty/blocks"
+
+export default function LevelSummary({ level }: LevelSummaryProps) {
+  return (
+    <div className={styles.levelSummary}>
+      <Image src={level.icon} alt={level.name} height={50} width={100} />
+      <span className={styles.levelRequirements}>{level.requirement}</span>
+      <p className={styles.levelSummaryText}>{level.description}</p>
+    </div>
+  )
+}
@@ -0,0 +1,20 @@
+.levelSummary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.levelRequirements {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Medium);
+  color: #f7e1d5;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.levelSummaryText {
+  color: var(--Main-Brand-Burgundy);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  margin: 0;
+}