8616e4ab76
Feat/SW-1276 implement design * feat(SW-1276) UI implementation Desktop part 1 for MyStay * feat(SW-1276) UI implementation Desktop part 2 for MyStay * feat(SW-1276) UI implementation Mobile part 1 for MyStay * refactor: move files from MyStay/MyStay to MyStay * feat(SW-1276) Sidepeek implementation * feat(SW-1276): Refactoring * feat(SW-1276) UI implementation Mobile part 2 for MyStay * feat(SW-1276): translations * feat(SW-1276) fixed skeleton * feat(SW-1276): Added missing translations * feat(SW-1276): Removed console log * feat(SW-1276) fixed translations * feat(SW-1276): Added translations * feat(SW-1276) fix dynamic ID:s * feat(SW-1276) removed createElement * feat(SW-1276): Fixed build errors * feat(SW-1276): Updated label * feat(SW-1276): Rewrite SummaryCard Approved-by: Niclas Edenvin
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./summaryCard.module.css"
|
|
|
|
interface SummaryCardProps {
|
|
title: string
|
|
image: {
|
|
src: string
|
|
alt: string
|
|
}
|
|
texts: string[]
|
|
supportingText?: string
|
|
links?: {
|
|
href: string
|
|
text: string
|
|
icon: React.ReactNode
|
|
}[]
|
|
chip?: React.ReactNode
|
|
}
|
|
|
|
export default function SummaryCard({
|
|
title,
|
|
texts,
|
|
image,
|
|
supportingText,
|
|
links,
|
|
chip,
|
|
}: SummaryCardProps) {
|
|
return (
|
|
<div className={styles.card}>
|
|
<div className={styles.image}>
|
|
<Image src={image.src} alt={image.alt} width={152} height={152} />
|
|
</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.topContent}>
|
|
<Body textTransform="bold" color="uiTextHighContrast">
|
|
{title}
|
|
</Body>
|
|
{texts.map((text) => (
|
|
<Body color="uiTextHighContrast" key={text}>
|
|
{text}
|
|
</Body>
|
|
))}
|
|
</div>
|
|
{supportingText && (
|
|
<Caption color="uiTextPlaceholder">{supportingText}</Caption>
|
|
)}
|
|
<div className={styles.bottomContent}>
|
|
{chip}
|
|
{links && (
|
|
<div className={styles.links}>
|
|
{links.map((link) => (
|
|
<Caption asChild type="bold" color="burgundy" key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
target="_blank"
|
|
color="burgundy"
|
|
className={styles.link}
|
|
>
|
|
{link.icon}
|
|
{link.text}
|
|
</Link>
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|