Boost Azure Demo

Frontend/src/components/dashboard/student/dashboard-progress-focus.tsx

@@ -0,0 +1,40 @@
+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;