CartFlyout() — astro Function Reference

Architecture documentation for the CartFlyout() function in CartFlyout.tsx from the astro codebase.

Function tsx StateStores NanostoresImplementation

Entity Profile

StateStores→ NanostoresImplementation→ CartFlyout() — astro Function Reference

Dependency Diagram

graph TD
  5276c2e4_47d1_47e6_649d_96cd230cd7d1["CartFlyout()"]
  82a2ad24_ec13_dffb_971f_f9297a68f94a["CartFlyout.tsx"]
  5276c2e4_47d1_47e6_649d_96cd230cd7d1 -->|defined in| 82a2ad24_ec13_dffb_971f_f9297a68f94a
  style 5276c2e4_47d1_47e6_649d_96cd230cd7d1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

examples/with-nanostores/src/components/CartFlyout.tsx lines 5–28

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>
	);
}