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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -1,6 +1,8 @@
import Image from "@/components/Image"
import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
@@ -12,31 +14,32 @@ import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar
export default async function JoinLoyaltyContact({
block,
lang,
}: JoinLoyaltyContactProps) {
const { formatMessage } = await getIntl()
return (
<div className={styles.container}>
<div className={styles.wrapper}>
<Title level="h3">{block.title}</Title>
<Image
alt="Scandic Friends"
className={styles.image}
height={65}
src="/_static/icons/scandic-friends.png"
width={203}
/>
{block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
<Button intent="primary">
<span>{formatMessage({ id: "Join Scandic Friends" })}</span>
<section className={styles.container}>
<article className={styles.wrapper}>
<Title as="h4" level="h3">
{block.title}
</Title>
<ScandicFriends color="primaryLightOnSurfaceAccent" />
{block.preamble ? (
<Body textAlign="center">{block.preamble}</Body>
) : null}
<Button asChild className={styles.link} intent="primary">
<Link href="#">
{formatMessage({ id: "Join Scandic Friends" })}
</Link>
</Button>
<div className={styles.linkContainer}>
<Link href="/login" className={styles.loginLink}>
<Link href={`/${lang}/login`}>
<Footnote textAlign="center" textTransform="bold">
{formatMessage({ id: "Already a friend?" })} <br />
{formatMessage({ id: "Click here to log in" })}
</Link>
</div>
</div>
{block.contact && <Contact contactBlock={block.contact} />}
</div>
</Footnote>
</Link>
</article>
{block.contact ? <Contact contactBlock={block.contact} /> : null}
</section>
)
}