Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
fix: use array map for items
Browse files Browse the repository at this point in the history
  • Loading branch information
@konstantinosG-deriv
konstantinosG-deriv committed Feb 6, 2024
1 parent d2c4a6c commit 8232af7
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 232 deletions.
270 changes: 70 additions & 200 deletions src/pages/regulatory/_eu-grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,209 +31,79 @@ import { CustomLink } from '@deriv-com/components'
import * as styles from './eu_grid.module.scss'
import { WithIntl, Localize } from 'components/localization'

const countries = [
{ href: '/regulatory/countries/Austria.pdf', icon: <FlagAustriaIcon />, text: '_t_Austria_t_' },
{
href: '/regulatory/countries/Bulgaria.pdf',
icon: <FlagBulgariaIcon />,
text: '_t_Bulgaria_t_',
},
{ href: '/regulatory/countries/Croatia.pdf', icon: <FlagCroatiaIcon />, text: '_t_Croatia_t_' },
{ href: '/regulatory/countries/Cyprus.pdf', icon: <FlagCyprusIcon />, text: '_t_Cyprus_t_' },
{
href: '/regulatory/countries/CzechRepublic.pdf',
icon: <FlagCzechRepublicIcon />,
text: '_t_Czech Republic_t_',
},
{ href: '/regulatory/countries/Denmark.pdf', icon: <FlagDenmarkIcon />, text: '_t_Denmark_t_' },
{ href: '/regulatory/countries/Estonia.pdf', icon: <FlagEstoniaIcon />, text: '_t_Estonia_t_' },
{ href: '/regulatory/countries/Finland.pdf', icon: <FlagFinlandIcon />, text: '_t_Finland_t_' },
{ href: '/regulatory/countries/France.pdf', icon: <FlagFranceIcon />, text: '_t_France_t_' },
{ href: '/regulatory/countries/Germany.pdf', icon: <FlagGermanyIcon />, text: '_t_Germany_t_' },
{ href: '/regulatory/countries/Greece.pdf', icon: <FlagGreeceIcon />, text: '_t_Greece_t_' },
{ href: '/regulatory/countries/Hungary.pdf', icon: <FlagHungaryIcon />, text: '_t_Hungary_t_' },
{ href: '/regulatory/countries/Italy.pdf', icon: <FlagItalyIcon />, text: '_t_Italy_t_' },
{ href: '/regulatory/countries/Ireland.pdf', icon: <FlagIrelandIcon />, text: '_t_Ireland_t_' },
{ href: '/regulatory/countries/Latvia.pdf', icon: <FlagLatviaIcon />, text: '_t_Latvia_t_' },
{
href: '/regulatory/countries/Lithuania.pdf',
icon: <FlagLithuaniaIcon />,
text: '_t_Lithuania_t_',
},
{
href: '/regulatory/countries/Luxembourg.pdf',
icon: <FlagLuxembourgIcon />,
text: '_t_Luxembourg_t_',
},
{
href: '/regulatory/countries/Netherlands.pdf',
icon: <FlagNetherlandIcon />,
text: '_t_Netherlands_t_',
},
{ href: '/regulatory/countries/Poland.pdf', icon: <FlagPolandIcon />, text: '_t_Poland_t_' },
{
href: '/regulatory/countries/Portugal.pdf',
icon: <FlagPortugalIcon />,
text: '_t_Portugal_t_',
},
{ href: '/regulatory/countries/Romania.pdf', icon: <FlagRomaniaIcon />, text: '_t_Romania_t_' },
{
href: '/regulatory/countries/Slovakia.pdf',
icon: <FlagSlovakiaIcon />,
text: '_t_Slovakia_t_',
},
{
href: '/regulatory/countries/Slovenia.pdf',
icon: <FlagSloveniaIcon />,
text: '_t_Slovenia_t_',
},
{ href: '/regulatory/countries/Spain.pdf', icon: <FlagSpainIcon />, text: '_t_Spain_t_' },
{ href: '/regulatory/countries/Sweden.pdf', icon: <FlagSwedenIcon />, text: '_t_Sweden_t_' },
]

const EUgrid = () => {
return (
<div className={styles.eu_grid}>
<CustomLink href="/regulatory/countries/Austria.pdf" className=" inline">
<div className={styles.country_container}>
<FlagAustriaIcon className={styles.icon} fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Austria_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Bulgaria.pdf" className=" inline">
<div className={styles.country_container}>
<FlagBulgariaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Bulgaria_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Croatia.pdf" className=" inline">
<div className={styles.country_container}>
<FlagCroatiaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Croatia_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Cyprus.pdf" className=" inline">
<div className={styles.country_container}>
<FlagCyprusIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Cyprus_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/CzechRepublic.pdf" className=" inline">
<div className={styles.country_container}>
<FlagCzechRepublicIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Czech Republic_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Denmark.pdf" className=" inline">
<div className={styles.country_container}>
<FlagDenmarkIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Denmark_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Estonia.pdf" className=" inline">
<div className={styles.country_container}>
<FlagEstoniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Estonia_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Finland.pdf" className=" inline">
<div className={styles.country_container}>
<FlagFinlandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Finland_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/France.pdf" className=" inline">
<div className={styles.country_container}>
<FlagFranceIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_France_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Germany.pdf" className=" inline">
<div className={styles.country_container}>
<FlagGermanyIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Germany_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Greece.pdf" className=" inline">
<div className={styles.country_container}>
<FlagGreeceIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Greece_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Hungary.pdf" className=" inline">
<div className={styles.country_container}>
<FlagHungaryIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Hungary_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Italy.pdf" className=" inline">
<div className={styles.country_container}>
<FlagItalyIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Italy_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Ireland.pdf" className=" inline">
<div className={styles.country_container}>
<FlagIrelandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Ireland_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Latvia.pdf" className=" inline">
<div className={styles.country_container}>
<FlagLatviaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Latvia_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Lithuania.pdf" className=" inline">
<div className={styles.country_container}>
<FlagLithuaniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Lithuania_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Luxembourg.pdf" className=" inline">
<div className={styles.country_container}>
<FlagLuxembourgIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Luxembourg_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Netherlands.pdf" className=" inline">
<div className={styles.country_container}>
<FlagNetherlandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Netherlands_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Poland.pdf" className=" inline">
<div className={styles.country_container}>
<FlagPolandIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Poland_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Portugal.pdf" className=" inline">
<div className={styles.country_container}>
<FlagPortugalIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Portugal_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Romania.pdf" className=" inline">
<div className={styles.country_container}>
<FlagRomaniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Romania_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Slovakia.pdf" className=" inline">
<div className={styles.country_container}>
<FlagSlovakiaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Slovakia_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Slovenia.pdf" className=" inline">
<div className={styles.country_container}>
<FlagSloveniaIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Slovenia_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Spain.pdf" className=" inline">
<div className={styles.country_container}>
<FlagSpainIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Spain_t_" />
</Text>
</div>
</CustomLink>
<CustomLink href="/regulatory/countries/Sweden.pdf" className=" inline">
<div className={styles.country_container}>
<FlagSwedenIcon className={styles.icon} iconSize="md" fill="#000000b8" />
<Text className="text-base">
<Localize translate_text="_t_Sweden_t_" />
</Text>
</div>
</CustomLink>
{countries.map((country, index) => (
<CustomLink key={index} href={country.href} className="inline">
<div className={styles.country_container}>
{country.icon && <div className={styles.icon}>{country.icon}</div>}
<Text className="text-base">
<Localize translate_text={country.text} />
</Text>
</div>
</CustomLink>
))}
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/regulatory/eu_grid.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ display: grid;

.icon {
width: 36px;
height: 24px;
height: 31px;
margin-right: 8px;
}

Expand Down
Loading

0 comments on commit 8232af7

Please sign in to comment.