duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(vault): match the reference Guadagni layout

Browse Source 
Each row is now a white bordered card (icon + name) with the currencies and a
gray disabled Riscatta button outside it, plus a gray disabled Richiedili Tutti
at the bottom — matching the reference screenshot.
This commit is contained in:
simoleo89
2026-06-15 20:31:25 +02:00
parent 5ac3b34916
commit 8c9566f928
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/vault/VaultView.tsx
+19 -12
View File
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
import { IconType } from 'react-icons'; import { IconType } from 'react-icons';
import { FaArrowUp, FaBoxOpen, FaBriefcase, FaCrown, FaGamepad, FaGift, FaHandHoldingHeart, FaShoppingBag, FaStore, FaTrophy } from 'react-icons/fa'; import { FaArrowUp, FaBoxOpen, FaBriefcase, FaCrown, FaGamepad, FaGift, FaHandHoldingHeart, FaShoppingBag, FaStore, FaTrophy } from 'react-icons/fa';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { Button, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; import { LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
const localizeWithFallback = (key: string, fallback: string) => const localizeWithFallback = (key: string, fallback: string) =>
{ {
@@ -20,7 +20,8 @@ interface EarningRow
} }
// Currency ids: 5 = diamonds, 0 = duckets. Amounts are placeholders (0) until // Currency ids: 5 = diamonds, 0 = duckets. Amounts are placeholders (0) until
// the emulator exposes the earnings data + claim packets. // the emulator exposes the earnings data + claim packets. The category icons
// are FontAwesome placeholders — swap in the exact pixel icons once available.
const EARNINGS: EarningRow[] = [ const EARNINGS: EarningRow[] = [
{ key: 'daily', label: 'Regalo giornaliero', Icon: FaGift, currencies: [ 5 ] }, { key: 'daily', label: 'Regalo giornaliero', Icon: FaGift, currencies: [ 5 ] },
{ key: 'games', label: 'Giochi', Icon: FaGamepad, currencies: [ 0 ] }, { key: 'games', label: 'Giochi', Icon: FaGamepad, currencies: [ 0 ] },
@@ -74,31 +75,37 @@ export const VaultView: FC<{}> = props =>
return ( return (
<NitroCardView className="nitro-vault w-[430px]" theme="primary-slim" uniqueKey="vault"> <NitroCardView className="nitro-vault w-[430px]" theme="primary-slim" uniqueKey="vault">
<NitroCardHeaderView headerText={ localizeWithFallback('earnings.title', 'Guadagni') } onCloseClick={ () => setIsVisible(false) } /> <NitroCardHeaderView headerText={ localizeWithFallback('earnings.title', 'Guadagni') } onCloseClick={ () => setIsVisible(false) } />
<NitroCardContentView className="flex flex-col gap-1 text-black"> <NitroCardContentView className="flex flex-col gap-[5px] text-black">
{ EARNINGS.map(row => { EARNINGS.map(row =>
{ {
const RowIcon = row.Icon; const RowIcon = row.Icon;
return ( return (
<div key={ row.key } className="flex items-center gap-2 rounded-md border border-black/10 bg-white px-2 py-1.5"> <div key={ row.key } className="flex items-center gap-2">
<span className="flex items-center justify-center w-6 h-6 shrink-0 rounded-full bg-[#1e7295]/10 text-[#1e7295]"> <div className="flex min-w-0 flex-1 items-center gap-2 rounded-[5px] border-2 border-[#b3b3b3] bg-white px-1.5 py-1">
<RowIcon size={ 13 } /> <span className="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded border border-black/15 bg-white text-[#1e7295]">
</span> <RowIcon size={ 12 } />
<Text bold className="flex-1 truncate">{ localizeWithFallback('earnings.' + row.key, row.label) }</Text> </span>
<div className="flex items-center gap-2 shrink-0"> <Text bold className="truncate">{ localizeWithFallback('earnings.' + row.key, row.label) }</Text>
</div>
<div className="flex min-w-[78px] shrink-0 items-center justify-end gap-2">
{ row.currencies.map((currency, index) => ( { row.currencies.map((currency, index) => (
<span key={ index } className="flex items-center gap-1"> <span key={ index } className="flex items-center gap-1">
<LayoutCurrencyIcon type={ currency } /> <LayoutCurrencyIcon type={ currency } />
<Text small>0</Text> <Text bold small>0</Text>
</span> </span>
)) } )) }
</div> </div>
<Button variant="success" disabled>{ localizeWithFallback('earnings.claim', 'Riscatta') }</Button> <button type="button" disabled className="shrink-0 cursor-default rounded border border-black/20 bg-[#cfcfcf] px-2 py-[3px] text-[0.7rem] font-bold text-black/45">
{ localizeWithFallback('earnings.claim', 'Riscatta') }
</button>
</div> </div>
); );
}) } }) }
<div className="flex justify-center pt-1"> <div className="flex justify-center pt-1">
<Button variant="success" disabled>{ localizeWithFallback('earnings.claim.all', 'Richiedili Tutti') }</Button> <button type="button" disabled className="cursor-default rounded border border-black/20 bg-[#cfcfcf] px-7 py-1 text-[0.78rem] font-bold text-black/45">
{ localizeWithFallback('earnings.claim.all', 'Richiedili Tutti') }
</button>
</div> </div>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>