41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { Component } from "solid-js";
|
|
import { For } from "solid-js";
|
|
import DashboardActivity from "./dashboard-activity";
|
|
import DashboardInsights from "./dashboard-insights";
|
|
import type { DashboardProgressData } from "./dashboard-progress.data";
|
|
import styles from "./dashboard-progress-focus.module.scss";
|
|
|
|
type DashboardProgressFocusProps = DashboardProgressData;
|
|
|
|
const DashboardProgressFocus: Component<DashboardProgressFocusProps> = (props) => {
|
|
return (
|
|
<section class={styles.section}>
|
|
<article class={styles.heroCard}>
|
|
<div class={styles.heroCopy}>
|
|
<p class={styles.eyebrow}>{props.hero.eyebrow}</p>
|
|
<h1>{props.hero.title}</h1>
|
|
<p>{props.hero.description}</p>
|
|
</div>
|
|
|
|
<div class={styles.statGrid}>
|
|
<For each={props.hero.stats}>
|
|
{(stat) => (
|
|
<div class={styles.statCard}>
|
|
<strong>{stat.value}</strong>
|
|
<span>{stat.label}</span>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</article>
|
|
|
|
<div class={styles.contentStack}>
|
|
<DashboardActivity {...props.activity} />
|
|
<DashboardInsights {...props.insights} />
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default DashboardProgressFocus;
|