+
+
+
+
+ + Accessories +
+ +
+
+
+
+
+ {products &&
+
+
+ + Explore by Category +
+ +
+
+ ![{categories[0].imgAlt}]({categories[0].imgSrc})
+
+
+
+
+
+
+
+
+ {categories.slice(1).map((category, index) => (
+
+
+ + + {categories[0].linkText} +
+ +
+ 
+
+
+ ))}
+
+
+
+
+ + + + {category.linkText} + +
+ +
+
+
+ {/* Desktop Header */}
+
+
+
+
+ Vogue Junction
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+
+
+
+
+
+ Vogue Junction
+
+
+
+
+ Women
+
+
+ Men
+
+
+ Accessories
+
+
+
+
+ );
+};
+
+export default Hero;
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ImageGallery.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ImageGallery.tsx
new file mode 100644
index 0000000..b68a3af
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ImageGallery.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import { Product } from '../lib/datatypes';
+
+type ImageGalleryProps = {
+ product: Product;
+};
+
+const ImageGallery: React.FC
+
+ Welcome to the world of {companyName}!
++ Discover a diverse collection of stylish products for everyone. From + trendy apparel and accessories to timeless classics, we offer + something for every taste and occasion. Shop now and elevate your + style! +
+
+ {/* Image selector */}
+
+ );
+};
+
+export default ImageGallery;
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductList.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductList.tsx
new file mode 100644
index 0000000..17f7234
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductList.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Product } from '../lib/datatypes';
+
+import ProductListCard from './ProductListCard';
+
+type ProductListProps = {
+ data: Product[];
+};
+
+const ProductList: React.FC
+
+
+ {/* Main Image Display */}
+
+ {product.images.map((image, index) => (
+
+ ))}
+
+
+ 
+
+
+
+ );
+};
+
+export default ProductList;
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductListCard.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductListCard.tsx
new file mode 100644
index 0000000..dcf4832
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/components/ProductListCard.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Product } from '../lib/datatypes';
+
+import { Link } from 'react-router-dom';
+
+const ProductListCard = ({ product }: { product: Product }) => {
+ const { id, title, price, rating, stock, thumbnail } = product;
+
+ return (
+ Products
+ +
+ {data.map((product) => (
+
+
+
+ );
+};
+
+export default ProductListCard;
+
+function StarIcon(props: React.SVGProps
+ 
+
+
+
+
+ + + + {title} + +
+ +
+
+
+ {Math.round(rating)} out of 5 stars
+ +
+ {[0, 1, 2, 3, 4].map((ratingNumber) => (
+ ratingNumber ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+ {stock} in stock
++ {Number(price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+
+
+
+
+
+
+ );
+}
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/men.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/men.tsx
new file mode 100644
index 0000000..710cc0b
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/men.tsx
@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+
+import Header from '../components/Header';
+import ProductList from '../components/ProductList';
+import Footer from '../components/Footer';
+
+import { Product } from '../lib/datatypes';
+import { fetchProductsByCategory } from '../lib/helpers';
+
+export default function MenProducts() {
+ const [products, setProducts] = useState
+
+
+
+
+
+ );
+}
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/product.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/product.tsx
new file mode 100644
index 0000000..d90186f
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/pages/product.tsx
@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react';
+import { Product, Review } from '../lib/datatypes';
+
+import { useParams, useNavigate } from 'react-router-dom';
+
+import Header from '../components/Header';
+import ImageGallery from '../components/ImageGallery';
+import Footer from '../components/Footer';
+
+const ProductPage = () => {
+ const { productId } = useParams<{ productId: string }>();
+ const [product, setProduct] = useState
+
+
+
+
+ + Men Products +
+ +
+
+
+
+
+ {products &&
+
+
+
+
+
+
+ );
+};
+
+export default ProductPage;
+
+function BackButton() {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+ {product.title}
+ +
+
+ Product information
+ ++ {Number(product.price).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + })} +
+ + {/* Rating */} +
+
+
+ {/* Availability */}
+ Rating
+ +
+
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+ {product.rating} out of 5 stars
+
+
+
+ {/* Description */}
+ {product.stock} in stock
+
+
+
+ {/* Tags */}
+ Description
+ +{product.description}
+
+
+ Tags
+
+ {product.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+
+ );
+}
+
+function Reviews({ reviews }: { reviews: Review[] }) {
+ return (
+
+
+ );
+}
+
+function ChevronRightIcon(props: React.SVGPropsReviews
+ +
+ {reviews.map((review, index) => (
+
+
+
+ ))}
+
+ {[0, 1, 2, 3, 4].map((rating) => (
+ rating ? '#1e293b' : '#e5e7eb',
+ }}
+ aria-hidden="true"
+ />
+ ))}
+
+
+
+
+
+ {review.reviewerName}
+ +{new Date(review.date).toLocaleDateString()}
+{review.comment}
+
+
+
+
+
+
+ );
+}
diff --git a/06_js-debug/uebungen/u17-19_shop-vitest/src/tests/Hero.test.tsx b/06_js-debug/uebungen/u17-19_shop-vitest/src/tests/Hero.test.tsx
new file mode 100644
index 0000000..c8565f1
--- /dev/null
+++ b/06_js-debug/uebungen/u17-19_shop-vitest/src/tests/Hero.test.tsx
@@ -0,0 +1,40 @@
+import Hero from '../../src/components/Hero';
+
+import { it, expect, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+// TestSuite
+describe('Hero', () => {
+ it('should render h1 element', () => {
+ render(
+
+
+
+
+ + Women Products +
+ +
+
+
+
+
+ {products &&
+
-
+
);
diff --git a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx
index 396b8ba..dcf4832 100644
--- a/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx
+++ b/06_js-debug/unterricht/tag50/01_shop-vitest/src/components/ProductListCard.tsx
@@ -21,9 +21,7 @@ const ProductListCard = ({ product }: { product: Product }) => {
-
@@ -89,9 +84,7 @@ const ProductPage = () => {
- {Math.round(rating)} out of 5 stars -
+{Math.round(rating)} out of 5 stars
{[0, 1, 2, 3, 4].map((ratingNumber) => (
@@ -56,12 +54,7 @@ export default ProductListCard;
function StarIcon(props: React.SVGProps) {
return (
-
- - {product.rating} out of 5 stars -
+{product.rating} out of 5 stars
Description
-- {product.description} -
+{product.description}
{review.reviewerName}
-- {new Date(review.date).toLocaleDateString()} -
+{new Date(review.date).toLocaleDateString()}
{review.comment}
@@ -178,25 +169,15 @@ function ChevronRightIcon(props: React.SVGProps