feat: add level selection logic

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

@@ -9,13 +9,33 @@ import ChevronDown from "@/components/Icons/ChevronDown"
 import Image from "@/components/Image"
 import Title from "@/components/Title"
 
+import levelsData from "./data/EN.json"
+
 import styles from "./overviewTable.module.css"
 
+const defaultCardProps = {
+  title: "title",
+  description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+  eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+  comparedValues: { a: false, b: true },
+}
+
 export default function OverviewTable() {
-  const options = [
-    { value: "a", label: "a" },
-    { value: "b", label: "b" },
-  ]
+  const [selectedLevelA, setSelectedLevelA] = useState("1")
+  const [selectedLevelB, setSelectedLevelB] = useState("2")
+
+  function handleSelectChangeA(event: React.ChangeEvent<HTMLSelectElement>) {
+    setSelectedLevelA(event.target.value)
+  }
+
+  function handleSelectChangeB(event: React.ChangeEvent<HTMLSelectElement>) {
+    setSelectedLevelB(event.target.value)
+  }
+
+  const levelOptions = levelsData.levels.map((level) => ({
+    label: level.name,
+    value: `${level.tier}`,
+  }))
   return (
     <div className={styles.container}>
       <Title
@@ -41,18 +61,37 @@ export default function OverviewTable() {
         <div className={styles.rightColumn} />
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>
-            <Select options={options} />
-            <LevelSummary level={"1"} />
+            <Select
+              options={levelOptions}
+              defaultOption={selectedLevelA}
+              onChange={handleSelectChangeA}
+            />
+            <LevelSummary
+              level={
+                levelsData.levels.find(
+                  (level) => `${level.tier}` === selectedLevelA
+                ) as Level
+              }
+            />
           </div>
           <div className={styles.columnHeader}>
-            <Select options={options} />
-            <LevelSummary level={"2"} />
+            <Select
+              options={levelOptions}
+              defaultOption={selectedLevelB}
+              onChange={handleSelectChangeB}
+            />
+            <LevelSummary
+              level={
+                levelsData.levels.find(
+                  (level) => `${level.tier}` === selectedLevelB
+                ) as Level
+              }
+            />
           </div>
         </div>
-        <PerkCard />
-        <PerkCard />
-        <PerkCard />
-        <PerkCard />
+        <PerkCard {...defaultCardProps} />
+        <PerkCard {...defaultCardProps} />
+        <PerkCard {...defaultCardProps} />
       </div>
     </div>
   )
@@ -63,22 +102,25 @@ type SelectProps = {
     label: string
     value: string
   }[]
+  defaultOption: string
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }
 
-function Select({ options }: SelectProps) {
-  console.log({ options })
+function Select({ options, defaultOption, onChange }: SelectProps) {
   return (
     <div className={styles.selectContainer}>
-      <select className={styles.select}>
+      <select className={styles.select} onChange={onChange}>
         {options.map((option) => (
-          <option key={option.label} value={option.value}>
+          <option
+            key={option.label}
+            value={option.value}
+            selected={option.value === defaultOption}
+          >
             {option.label}
           </option>
         ))}
       </select>
-      <label className={styles.selectLabel} htmlFor="">
-        {_("Level")}
-      </label>
+      <label className={styles.selectLabel}>{_("Level")}</label>
       <span className={styles.selectChevron}>
         <ChevronDown />
       </span>
@@ -86,28 +128,37 @@ function Select({ options }: SelectProps) {
   )
 }
 
-function LevelSummary({ level }: { level: string }) {
+type Level = {
+  tier: number
+  name: string
+  description: string
+  requirement: string
+  icon: string
+}
+
+type LevelSummaryProps = {
+  level: Level
+}
+
+function LevelSummary({ level }: LevelSummaryProps) {
   return (
     <div className={styles.levelSummary}>
-      <Image
-        src="/_static/icons/loyaltylevels/new-friend.svg"
-        alt="level"
-        height={50}
-        width={100}
-      />
-      <span className={styles.levelRequirements}>10 000p or X nights</span>
-      <p className={styles.levelSummaryText}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Arcu risus quis
-        varius quam quisque id diam vel. Rhoncus urna neque viverra justo.
-        Mattis aliquam faucibus purus in massa. Id cursus metus aliquam eleifend
-        mi in nulla posuere.
-      </p>
+      <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>
   )
 }
 
-function PerkCard() {
+type PerkCardProps = {
+  comparedValues: {
+    a: boolean | string
+    b: boolean | string
+  }
+  title: string
+  description: string
+}
+function PerkCard({ comparedValues, title, description }: PerkCardProps) {
   const [isExpanded, setIsExpanded] = useState(false)
   return (
     <div className={styles.perkCard}>
@@ -116,26 +167,22 @@ function PerkCard() {
           <summary className={styles.summary}>
             <hgroup className={styles.perkCardHeader}>
               <Title as="h5" level="h2" className={styles.perkCardTitle}>
-                title
+                {title}
               </Title>
               <span className={styles.chevron}>
                 <ChevronDown />
               </span>
             </hgroup>
           </summary>
-          <p className={styles.perkCardDescription}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed
-            adipiscing diam donec adipiscing tristique risus nec feugiat.
-          </p>
+          <p className={styles.perkCardDescription}>{description}</p>
         </details>
       </div>
       <div className={styles.perkComparison}>
         <div className={styles.comparisonItem}>
-          <CheckCircle />
+          {comparedValues.a ? <CheckCircle /> : "-"}
         </div>
         <div className={styles.comparisonItem}>
-          <CheckCircle />
+          {comparedValues.b ? <CheckCircle /> : "-"}
         </div>
       </div>
     </div>