3d11cfb50a
Feature/sas mypages * feat: Add SAS partner page under my pages * fix: feature toggle SAS Partner page in my pages * add translations for SAS account page * use 'flex-start' instead of 'start' * fix: flatten css * fix: don't use <SectionContainer /> on linkedAccounts page
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import styles from "./loading.module.css"
|
|
|
|
type Size = "small" | "medium" | "large"
|
|
type Color = "white" | "burgundy"
|
|
type Props = {
|
|
size?: Size
|
|
color?: Color
|
|
className?: string
|
|
}
|
|
|
|
export function Loading({
|
|
size = "medium",
|
|
color = "burgundy",
|
|
className,
|
|
}: Props) {
|
|
return (
|
|
<svg
|
|
width={sizes[size]}
|
|
height={sizes[size]}
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`${styles.loading} ${className}`}
|
|
>
|
|
<circle cx="10" cy="1.73913" r="1.73913" fill={colors[color]} />
|
|
<circle cx="16.087" cy="4.34783" r="1.73913" fill={colors[color]} />
|
|
<circle cx="18.2609" cy="10" r="1.73913" fill={colors[color]} />
|
|
<circle cx="16.087" cy="15.6522" r="1.73913" fill={colors[color]} />
|
|
<circle cx="10" cy="18.2609" r="1.73913" fill={colors[color]} />
|
|
<circle cx="3.91304" cy="15.6522" r="1.73913" fill={colors[color]} />
|
|
<circle cx="1.73913" cy="10" r="1.73913" fill={colors[color]} />
|
|
<circle cx="3.91304" cy="4.34783" r="1.73913" fill={colors[color]} />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
const colors: { [color in Color]: string } = {
|
|
white: "#fff",
|
|
burgundy: "var(--Scandic-Brand-Burgundy)",
|
|
}
|
|
|
|
const sizes: { [size in Size]: number } = {
|
|
small: 16,
|
|
medium: 20,
|
|
large: 24,
|
|
}
|