From b4feb81355f9832c5698f81f8fdf33121e0189a5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Jun 2025 12:45:04 +0000
Subject: Sync from 0947a69192ad6820970902c7c951fb0cf31fcf4b

---
 src/components/CartFlyout.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/CartFlyout.tsx

(limited to 'src/components/CartFlyout.tsx')

diff --git a/src/components/CartFlyout.tsx b/src/components/CartFlyout.tsx
new file mode 100644
index 000000000..98fd8cbfb
--- /dev/null
+++ b/src/components/CartFlyout.tsx
@@ -0,0 +1,28 @@
+import { useStore } from '@nanostores/preact';
+import { cartItems, isCartOpen } from '../cartStore';
+import styles from './CartFlyout.module.css';
+
+export default function CartFlyout() {
+	const $isCartOpen = useStore(isCartOpen);
+	const $cartItems = useStore(cartItems);
+
+	return (
+		<aside hidden={!$isCartOpen} className={styles.container}>
+			{Object.values($cartItems).length ? (
+				<ul className={styles.list} role="list">
+					{Object.values($cartItems).map((cartItem) => (
+						<li className={styles.listItem}>
+							<img className={styles.listItemImg} src={cartItem.imageSrc} alt={cartItem.name} />
+							<div>
+								<h3>{cartItem.name}</h3>
+								<p>Quantity: {cartItem.quantity}</p>
+							</div>
+						</li>
+					))}
+				</ul>
+			) : (
+				<p>Your cart is empty!</p>
+			)}
+		</aside>
+	);
+}
-- 
cgit v1.2.3