scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust viewport styles

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-27 14:50:45 +02:00
parent 7b206947bc
commit f11e0c3903
2 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -86,23 +86,26 @@ function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
const aBenefit = levelA.benefits[idx]
const bBenefit = levelB.benefits[idx]
return (
<BenefitCard
key={benefit.name}
title={benefit.name}
description={benefit.description}
comparedValues={{
a: {
unlocked: aBenefit.unlocked,
value: aBenefit.value,
valueDetails: aBenefit.valueDetails,
},
b: {
unlocked: bBenefit.unlocked,
value: bBenefit.value,
valueDetails: bBenefit.valueDetails,
},
}}
/>
<div key={benefit.name} className={styles.benefitCardWrapper}>
<div className={styles.firstColumn} />
<div className={styles.secondColumn} />
<BenefitCard
title={benefit.name}
description={benefit.description}
comparedValues={{
a: {
unlocked: aBenefit.unlocked,
value: aBenefit.value,
valueDetails: aBenefit.valueDetails,
},
b: {
unlocked: bBenefit.unlocked,
value: bBenefit.value,
valueDetails: bBenefit.valueDetails,
},
}}
/>
</div>
)
})
}
@@ -110,6 +113,7 @@ function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
export default function OverviewTable() {
const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
function handleSelectChange(
callback: Dispatch<SetStateAction<ComparisonLevel>>
@@ -141,8 +145,6 @@ export default function OverviewTable() {
</p>
</div>
<div className={styles.mobileColumns}>
<div className={styles.firstColumn} />
<div className={styles.secondColumn} />
<div className={styles.columnHeaderContainer}>
<div className={styles.columnHeader}>
<Select
@@ -162,7 +164,7 @@ export default function OverviewTable() {
</div>
<div className={styles.columnHeader}>
<Select
name={"benefitA"}
name={"benefitB"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
@@ -180,9 +182,6 @@ export default function OverviewTable() {
{createComparison(selectedLevelA, selectedLevelB)}
</div>
<div className={styles.columns}>
<div className={styles.firstColumn} />
<div className={styles.secondColumn} />
<div className={styles.thirdColumn} />
<div className={styles.columnHeaderContainer}>
<div className={styles.columnHeader}>
<Select
@@ -202,7 +201,7 @@ export default function OverviewTable() {
</div>
<div className={styles.columnHeader}>
<Select
name={"benefitA"}
name={"benefitB"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
@@ -221,8 +220,8 @@ export default function OverviewTable() {
name={"benefitC"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelA.tier}
onSelect={handleSelectChange(setSelectedLevelA)}
defaultSelectedKey={selectedLevelC.tier}
onSelect={handleSelectChange(setSelectedLevelC)}
/>
<LevelSummary
level={
@@ -233,6 +232,7 @@ export default function OverviewTable() {
/>
</div>
</div>
{createComparison(selectedLevelA, selectedLevelB, selectedLevelC)}
</div>
</div>
</>