There are no categories.
;
+ }
+
+ return (
+
+ {categories.map((category: categoriesType) => (
+
+ ))}
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/buttonList/buttonList.module.scss b/week2/project/ecommerce/src/components/buttonList/buttonList.module.scss
new file mode 100644
index 0000000000..24fd38b3a5
--- /dev/null
+++ b/week2/project/ecommerce/src/components/buttonList/buttonList.module.scss
@@ -0,0 +1,4 @@
+.buttonList {
+ display: flex;
+ column-gap: 20px;
+}
diff --git a/week2/project/ecommerce/src/components/card/Card.tsx b/week2/project/ecommerce/src/components/card/Card.tsx
new file mode 100644
index 0000000000..029539d878
--- /dev/null
+++ b/week2/project/ecommerce/src/components/card/Card.tsx
@@ -0,0 +1,49 @@
+import styles from "./card.module.scss";
+import { replaceFake } from "../../utils/replace-fake.ts";
+import type { ProductsType } from "../../api/products/products.type.ts";
+import { useFavourites } from "../../hooks/useFavourite.tsx";
+
+import HeartNotFilled from "../../assets/heart-svgrepo-com.svg";
+import HeartFilled from "../../assets/heart-like-svgrepo-com.svg";
+
+type CardProps = {
+ product: ProductsType;
+};
+
+export const Card = ({ product }: CardProps) => {
+ const { toggleFavourite, isFavourite } = useFavourites();
+
+ const fav = isFavourite(product.id);
+
+ const ontoggleFavourite = (e: React.MouseEvent
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/card/card.module.scss b/week2/project/ecommerce/src/components/card/card.module.scss
new file mode 100644
index 0000000000..34a61399e5
--- /dev/null
+++ b/week2/project/ecommerce/src/components/card/card.module.scss
@@ -0,0 +1,474 @@
+@use "../../styles/helpers" as *;
+
+:root {
+ /* vars */
+ --hue1: 255;
+ --hue2: 222;
+ --border: 1px;
+ --border-color: hsl(var(--hue2), 12%, 20%);
+ --radius: #{rem(22)};
+
+ --ease: cubic-bezier(0.5, 1, 0.89, 1);
+}
+
+.card {
+ width: rem(300);
+ height: auto;
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+ transition-property: visibility, opacity, filter;
+ transition-duration: 0s, 0.25s, 0.25s;
+ transition-delay: 0.5s, 0s, 0s;
+ transition-timing-function: var(--ease);
+ filter: blur(4px);
+
+ font-family: "Asap", sans-serif;
+ color: #737985;
+
+ position: relative;
+ min-width: 275px;
+ min-height: 275px;
+ border-radius: var(--radius);
+ border: var(--border) solid var(--border-color);
+ padding: 1em;
+ background:
+ linear-gradient(
+ 235deg,
+ hsl(var(--hue1) 50% 10% / 0.8),
+ hsl(var(--hue1) 50% 10% / 0) 33%
+ ),
+ linear-gradient(
+ 45deg,
+ hsl(var(--hue2) 50% 10% / 0.8),
+ hsl(var(--hue2) 50% 10% / 0) 33%
+ ),
+ linear-gradient(hsl(220deg 25% 4.8% / 0.66));
+ backdrop-filter: blur(12px);
+ box-shadow:
+ hsl(var(--hue2) 50% 2%) 0px 10px 16px -8px,
+ hsl(var(--hue2) 50% 4%) 0px 20px 36px -14px;
+ cursor: pointer;
+ z-index: 2;
+}
+
+.card:not(.open)::before,
+.card:not(.open)::after,
+.card:not(.open) .glow {
+ opacity: 0;
+ pointer-events: none;
+ animation: glowoff 0.25s var(--ease) both;
+}
+
+.card.open {
+ visibility: visible;
+ opacity: 1;
+ pointer-events: auto;
+ transition-delay: 0s;
+ filter: blur(0px);
+
+ &::before,
+ &::after,
+ & .glow,
+ & .shine {
+ animation: glow 1s var(--ease) both;
+ }
+ & .shine {
+ animation-delay: 0s;
+ animation-duration: 2s;
+ }
+ & .glow {
+ animation-delay: 0.2s;
+ }
+ & .glow-bright {
+ animation-delay: 0.1s;
+ animation-duration: 1.5s;
+ }
+ & .shine-bottom {
+ animation-delay: 0.1s;
+ animation-duration: 1.8s;
+ }
+ & .glow-bottom {
+ animation-delay: 0.3s;
+ }
+ & .glow-bright.glow-bottom {
+ animation-delay: 0.3s;
+ animation-duration: 1.1s;
+ }
+}
+
+.card .shine,
+.card .glow {
+ --hue: var(--hue1);
+}
+.card .shine-bottom,
+.card .glow-bottom {
+ --hue: var(--hue2);
+ --conic: 135deg;
+}
+
+.card .shine {
+}
+
+.card .shine,
+.card .shine::before,
+.card .shine::after {
+ /* shine is the bright white-ish inner pixel-wide lights */
+
+ pointer-events: none;
+
+ border-radius: 0;
+ border-top-right-radius: inherit;
+ border-bottom-left-radius: inherit;
+ border: 1px solid transparent;
+
+ width: 75%;
+ height: auto;
+ min-height: 0px;
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ right: calc(var(--border) * -1);
+ top: calc(var(--border) * -1);
+ left: auto;
+
+ z-index: 1;
+
+ --start: 12%;
+ background: conic-gradient(
+ from var(--conic, -45deg) at center in oklch,
+ transparent var(--start, 0%),
+ hsl(var(--hue), var(--sat, 80%), var(--lit, 60%)),
+ transparent var(--end, 50%)
+ )
+ border-box;
+
+ mask: linear-gradient(transparent), linear-gradient(black);
+ mask-repeat: no-repeat;
+ mask-clip: padding-box, border-box;
+ mask-composite: subtract;
+}
+
+.card .shine::before,
+.card .shine::after {
+ content: "";
+ width: auto;
+ inset: -2px;
+ mask: none;
+}
+
+.card .shine::after {
+ z-index: 2;
+ --start: 17%;
+ --end: 33%;
+ background: conic-gradient(
+ from var(--conic, -45deg) at center in oklch,
+ transparent var(--start, 0%),
+ hsl(var(--hue), var(--sat, 80%), var(--lit, 85%)),
+ transparent var(--end, 50%)
+ );
+}
+
+.card .shine-bottom {
+ top: auto;
+ bottom: calc(var(--border) * -1);
+ left: calc(var(--border) * -1);
+ right: auto;
+}
+
+.card .glow {
+ /* glow is the sparse colour bleed with noise */
+
+ pointer-events: none;
+
+ border-top-right-radius: calc(var(--radius) * 2.5);
+ border-bottom-left-radius: calc(var(--radius) * 2.5);
+ border: calc(var(--radius) * 1.25) solid transparent;
+ inset: calc(var(--radius) * -2);
+
+ width: 75%;
+ height: auto;
+ min-height: 0px;
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ left: auto;
+ bottom: auto;
+
+ mask: url("https://assets.codepen.io/13471/noise-base.png");
+ mask-mode: luminance;
+ mask-size: 29%;
+
+ opacity: 1;
+ filter: blur(12px) saturate(1.25) brightness(0.5);
+ mix-blend-mode: plus-lighter;
+ z-index: 3;
+
+ &.glow-bottom {
+ inset: calc(var(--radius) * -2);
+ top: auto;
+ right: auto;
+ }
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border: inherit;
+ border-radius: inherit;
+ background: conic-gradient(
+ from var(--conic, -45deg) at center in oklch,
+ transparent var(--start, 0%),
+ hsl(var(--hue), var(--sat, 95%), var(--lit, 60%)),
+ transparent var(--end, 50%)
+ )
+ border-box;
+ mask: linear-gradient(transparent), linear-gradient(black);
+ mask-repeat: no-repeat;
+ mask-clip: padding-box, border-box;
+ mask-composite: subtract;
+ filter: saturate(2) brightness(1);
+ }
+
+ &::after {
+ --lit: 70%;
+ --sat: 100%;
+ --start: 15%;
+ --end: 35%;
+ border-width: calc(var(--radius) * 1.75);
+ border-radius: calc(var(--radius) * 2.75);
+ inset: calc(var(--radius) * -0.25);
+ z-index: 4;
+ opacity: 0.75;
+ }
+ &.glow-bottom::after {
+ }
+}
+
+.card .glow-bright {
+ /* glow-bright is a sharper colour outline to accentuate the shine */
+
+ --lit: 80%;
+ --sat: 100%;
+ --start: 13%;
+ --end: 37%;
+
+ border-width: 5px;
+ border-radius: calc(var(--radius) + 2px);
+ inset: -7px;
+ left: auto;
+ filter: blur(2px) brightness(0.66);
+
+ &::after {
+ content: none;
+ }
+
+ &.glow-bottom {
+ inset: -7px;
+ right: auto;
+ top: auto;
+ }
+}
+
+.card .inner,
+.card section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+}
+
+.card .inner {
+ font-size: 0.875rem;
+}
+
+.card hr {
+ width: 100%;
+ height: 0.5px;
+ background: var(--border-color);
+ border: none;
+ margin: 0.25em 0 0.5em;
+ opacity: 0.66;
+}
+
+.card input {
+ --tint2: hsl(var(--hue2) 50% 90% / 0.1);
+ font-family: "Asap", sans-serif;
+ font-weight: 300;
+ box-shadow: 0 0 0 1px transparent;
+ border: 1px solid hsl(var(--hue2) 13% 18.5% / 0.5);
+ background: hsl(var(--hue1) 0% 40% / 0.05);
+ border-radius: calc(var(--radius) * 0.33333);
+ padding-left: 2.33em;
+}
+
+.card label {
+ display: grid;
+ grid-template: 1fr/1fr;
+ margin-bottom: 1em;
+ width: 100%;
+ & > * {
+ grid-area: 1/1;
+ align-self: center;
+ }
+
+ & svg {
+ margin-left: 0.5em;
+ opacity: 0.5;
+ }
+}
+
+.card header {
+ font-size: 0.75rem;
+ font-weight: 300;
+ padding: 0 0.66em;
+}
+
+.card ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.card li {
+ position: relative;
+ padding: 0.66em;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ border-radius: calc(var(--radius) * 0.33333);
+ border: 1px solid transparent;
+ transition:
+ all 0.3s ease-in,
+ --item-opacity 0.3s ease-in;
+ background: linear-gradient(
+ 90deg in oklch,
+ hsl(var(--hue1) 29% 13% / var(--item-opacity)),
+ hsl(var(--hue1) 30% 15% / var(--item-opacity)) 24% 32%,
+ hsl(var(--hue1) 5% 7% / var(--item-opacity))
+ )
+ border-box;
+
+ &::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ border: inherit;
+ background: linear-gradient(
+ 90deg in oklch,
+ hsl(var(--hue1) 15% 16% / var(--item-opacity)),
+ hsl(var(--hue1) 40% 24% / var(--item-opacity)) 20% 32%,
+ hsl(var(--hue1) 2% 12% / var(--item-opacity))
+ )
+ border-box;
+ mask: linear-gradient(transparent), linear-gradient(black);
+ mask-repeat: no-repeat;
+ mask-clip: padding-box, border-box;
+ mask-composite: subtract;
+ }
+
+ &:hover,
+ &.selected,
+ &:hover::after,
+ &.selected::after {
+ --item-opacity: 0.5;
+ transition:
+ all 0.1s ease-out,
+ --item-opacity 0.1s ease-out;
+ color: white;
+ }
+
+ &.selected,
+ &.selected::after {
+ animation: flash 0.75s ease-out 1 forwards;
+ }
+}
+
+@property --item-opacity {
+ syntax: "
+ 
+
+ {replaceFake(title)}
+{replaceFake(description)}
+
+ {products.map((product) => (
+
+
+ ))}
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/cardList/cardList.module.scss b/week2/project/ecommerce/src/components/cardList/cardList.module.scss
new file mode 100644
index 0000000000..add6484e41
--- /dev/null
+++ b/week2/project/ecommerce/src/components/cardList/cardList.module.scss
@@ -0,0 +1,6 @@
+.cardList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: 6rem;
+}
diff --git a/week2/project/ecommerce/src/components/header/Header.tsx b/week2/project/ecommerce/src/components/header/Header.tsx
new file mode 100644
index 0000000000..79f423da51
--- /dev/null
+++ b/week2/project/ecommerce/src/components/header/Header.tsx
@@ -0,0 +1,20 @@
+import styles from "./header.module.scss";
+import { NavLink } from "react-router-dom";
+
+export const Header = () => {
+ return (
+
+
+
+
+
+ Products
+
+
+ Favourites
+
+
+
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/loader/Loader.tsx b/week2/project/ecommerce/src/components/loader/Loader.tsx
new file mode 100644
index 0000000000..e6dd41e40e
--- /dev/null
+++ b/week2/project/ecommerce/src/components/loader/Loader.tsx
@@ -0,0 +1,9 @@
+import styles from "./loader.module.scss";
+
+export const Loader = () => {
+ return (
+
+
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/loader/loader.module.scss b/week2/project/ecommerce/src/components/loader/loader.module.scss
new file mode 100644
index 0000000000..ed96702845
--- /dev/null
+++ b/week2/project/ecommerce/src/components/loader/loader.module.scss
@@ -0,0 +1,28 @@
+@use "../../styles/helpers" as *;
+
+.loaderWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: rem(20);
+}
+
+.loader {
+ align-self: center;
+ width: rem(50);
+ aspect-ratio: 1;
+ border-radius: 50%;
+ border: rem(8) solid;
+ border-color: var(--color-accent-500) transparent;
+ animation: l1 1s infinite;
+}
+
+.dark {
+ border-color: var(--color-accent-500) transparent;
+}
+
+@keyframes l1 {
+ to {
+ transform: rotate(0.5turn);
+ }
+}
diff --git a/week2/project/ecommerce/src/components/notificationCenter/NotificationCenter.tsx b/week2/project/ecommerce/src/components/notificationCenter/NotificationCenter.tsx
new file mode 100644
index 0000000000..3999f20f84
--- /dev/null
+++ b/week2/project/ecommerce/src/components/notificationCenter/NotificationCenter.tsx
@@ -0,0 +1,20 @@
+import type { Notification } from "../../context/notificationContext/NotificationsType.ts";
+
+import styles from "./notificationCenter.module.scss";
+
+type Props = {
+ notifications: Notification[];
+ onClose: (id: string) => void;
+};
+
+export const NotificationCenter = ({ notifications }: Props) => {
+ return (
+
+ {notifications.map((n) => (
+
+ );
+};
diff --git a/week2/project/ecommerce/src/components/notificationCenter/notificationCenter.module.scss b/week2/project/ecommerce/src/components/notificationCenter/notificationCenter.module.scss
new file mode 100644
index 0000000000..a99178c5b5
--- /dev/null
+++ b/week2/project/ecommerce/src/components/notificationCenter/notificationCenter.module.scss
@@ -0,0 +1,45 @@
+@use "../../styles/helpers" as *;
+
+.notificationWrapper {
+ position: fixed;
+ bottom: rem(20);
+ right: rem(20);
+ display: flex;
+ flex-direction: column;
+ gap: rem(20);
+ z-index: 1000;
+}
+
+.toastBox {
+ display: flex;
+ align-items: center;
+ gap: rem(10);
+ padding: rem(12) rem(20);
+ border-radius: rem(8);
+ color: white;
+ font-weight: bold;
+ animation: fadeOut 4s ease-in-out forwards;
+}
+
+.success {
+ background-color: var(--color-success-500);
+}
+
+.error {
+ background-color: var(--color-danger-500);
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ 90% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(#{rem(20)});
+ }
+}
diff --git a/week2/project/ecommerce/src/context/favouritesContext/FavouritesContext.tsx b/week2/project/ecommerce/src/context/favouritesContext/FavouritesContext.tsx
new file mode 100644
index 0000000000..875c41cf87
--- /dev/null
+++ b/week2/project/ecommerce/src/context/favouritesContext/FavouritesContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import type { FavouritesContextValue } from "./FavouritesTypes.ts";
+
+export const FavouritesContext = createContext<
+ FavouritesContextValue | undefined
+>(undefined);
diff --git a/week2/project/ecommerce/src/context/favouritesContext/FavouritesProvider.tsx b/week2/project/ecommerce/src/context/favouritesContext/FavouritesProvider.tsx
new file mode 100644
index 0000000000..a38dda77da
--- /dev/null
+++ b/week2/project/ecommerce/src/context/favouritesContext/FavouritesProvider.tsx
@@ -0,0 +1,29 @@
+import { type ReactNode, useState } from "react";
+import type { FavouriteId } from "./FavouritesTypes.ts";
+import { FavouritesContext } from "./FavouritesContext.tsx";
+
+export function FavouritesProvider({ children }: { children: ReactNode }) {
+ const [favourites, setFavourites] = useState
+ {n.message}
+
+ ))}
+ There is no favourites
;
+ }
+
+ return Products
+Product not found
;
+ }
+
+ const { image, title, description, price } = productData;
+
+ return (
+
+
+
+ );
+};
diff --git a/week2/project/ecommerce/src/pages/productPage/productPage.module.scss b/week2/project/ecommerce/src/pages/productPage/productPage.module.scss
new file mode 100644
index 0000000000..98af6ffe84
--- /dev/null
+++ b/week2/project/ecommerce/src/pages/productPage/productPage.module.scss
@@ -0,0 +1,13 @@
+.wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 5rem 0;
+}
+
+.img {
+ width: 200px;
+ height: 300px;
+}
diff --git a/week2/project/ecommerce/src/router/MainRouter.tsx b/week2/project/ecommerce/src/router/MainRouter.tsx
new file mode 100644
index 0000000000..e07018592c
--- /dev/null
+++ b/week2/project/ecommerce/src/router/MainRouter.tsx
@@ -0,0 +1,15 @@
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./router.tsx";
+import { NotificationProvider } from "../context/notificationContext/NotificationProvider.tsx";
+import { FavouritesProvider } from "../context/favouritesContext/FavouritesProvider.tsx";
+
+export function Router() {
+ return (
+ {replaceFake(productData?.title)}
+{replaceFake(description)}
+Price: ${price}
+Page not found
,
+ children: [
+ { index: true, element: