Skip to content

Commit aa1541d

Browse files
ibereolaoludareibereolaoludare
committed
duocart/client - ItemScreen.tsx, Cart.tsx
- added a few pages - did an image resize - adjusted components to fit - blah blah blah it's 4:50 fuck off
1 parent cb3760b commit aa1541d

File tree

7 files changed

+291
-39
lines changed

7 files changed

+291
-39
lines changed

‎client/public/images/category-items/devices.png‎

-9.79 MB
Loading

‎client/src/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ import NotFound from "./pages/NotFound";
1313
import About from "./pages/About";
1414
import Contact from "./pages/Contact";
1515
import Cart from "./pages/Cart";
16+
import ItemScreen from "./pages/ItemScreen";
1617

1718
// eslint-disable-next-line @typescript-eslint/no-unused-vars
18-
const urlPaths = ["home", "shop", "about", "contact", "cart"] as const; // update this array to add more url paths
19+
const urlPaths = ["home", "shop", "about", "contact", "cart", "item", "item/:id"] as const; // update this array to add more url paths
1920

2021
function App() {
2122
return (
@@ -27,6 +28,8 @@ function App() {
2728
<Route path="/about" component={About} />
2829
<Route path="/contact" component={Contact} />
2930
<Route path="/cart" component={Cart} />
31+
<Route path="/item/:id" component={ItemScreen} />
32+
<Route path="/item" component={NotFound} />
3033
<WouterRoute component={NotFound} />
3134
</Switch>
3235
</Fragment>

‎client/src/components/ui/header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,10 @@ export default function Header() {
140140
</>
141141
)}
142142
</DropdownMenuGroup>
143-
<DropdownMenuItem className="justify-center bg-foreground text-background hover:!bg-primary-foreground hover:!text-foreground">
143+
<DropdownMenuItem className="justify-center p-0 bg-foreground text-background hover:!bg-primary-foreground hover:!text-foreground">
144144
<Link
145145
href="/cart"
146-
className="w-full text-center">
146+
className="w-full text-center p-4">
147147
View Cart
148148
</Link>
149149
</DropdownMenuItem>

‎client/src/components/ui/shop-item.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ interface ShopItemProps {
1111
reviews: number;
1212
}
1313

14+
export interface StarRatingProps {
15+
rating: number;
16+
}
17+
1418
export default function ShopItem({
1519
name = "Clothing",
1620
id = "0",
@@ -19,9 +23,6 @@ export default function ShopItem({
1923
reviews = 0,
2024
price = 1200,
2125
}: ShopItemProps) {
22-
interface StarRatingProps {
23-
rating: number;
24-
}
2526

2627
function StarRating({ rating }: StarRatingProps) {
2728
const fullStars = Math.floor(rating);
@@ -90,9 +91,9 @@ export default function ShopItem({
9091
</div>
9192
<div className="flex justify-between items-center">
9293
<AnimatedSpan
93-
className="font-bold text-xl"
94+
className="font-bold text-2xl"
9495
delay={0.4}>
95-
₦{price}
96+
<sup>₦</sup>{" "}{price.toFixed(2)}
9697
</AnimatedSpan>
9798
<Button className="bg-foreground aspect-square rounded-full h-12 hover:bg-secondary-foreground">
9899
<i className="fa-solid fa-chevron-right text-background"></i>

‎client/src/pages/Cart.tsx‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const initialCart: CartItemProps[] = [
2828

2929
export default function Cart() {
3030
return (
31-
<>
31+
<div className="min-h-screen flex flex-col">
3232
<Header />
33-
<main className="flex flex-col w-full py-8 px-16">
33+
<main className="flex-1 w-full py-8 px-16">
3434
<section className="flex flex-col gap-4">
3535
{/* <AnimatePresence>
3636
{showMessage && (
@@ -66,13 +66,13 @@ export default function Cart() {
6666
</motion.div>
6767
)}
6868
</AnimatePresence> */}
69-
<div className="py-16 flex justify-center items-center">
70-
<h1 className="text-3xl font-bold">Shopping Cart</h1>
69+
<div className="py-24 flex justify-center items-center">
70+
<h1 className="text-4xl font-heading uppercase">Shopping Cart</h1>
7171
</div>
72-
<div className="flex justify-between gap-8">
72+
<h1 className="text-xl font-bold">Your Cart</h1>
73+
<div className="flex justify-between gap-8 relative">
7374
<div className="w-full flex flex-col gap-4">
74-
<h1 className="text-xl font-bold">Your Cart</h1>
75-
<div className="outline-4 border border-foreground/10 rounded-full outline-primary-foreground p-4 flex sticky top-0">
75+
<div className="outline-4 border border-foreground/10 rounded-full outline-primary-foreground flex justify-between p-4 bg-background sticky top-8 z-10 items-center">
7676
<div>
7777
<label className="flex items-center gap-2 cursor-pointer">
7878
<Input
@@ -85,6 +85,12 @@ export default function Cart() {
8585
</span>
8686
</label>
8787
</div>
88+
<Button
89+
size="lg"
90+
className="rounded-full hover:bg-primary-foreground/80 hover:text-foreground cursor-pointer w-12 h-12"
91+
aria-label="Remove from cart">
92+
<i className="fa-regular fa-trash"></i>
93+
</Button>
8894
</div>
8995
<div className="flex flex-col rounded-4xl overflow-hidden outline-4 outline-primary-foreground border border-foreground/10 bg-background px-4">
9096
<CartItem
@@ -103,35 +109,39 @@ export default function Cart() {
103109
/>
104110
</div>
105111
</div>
106-
<div className="basis-5/12 h-min p-4 sticky top-0 outline-4 outline-primary-foreground rounded-4xl mt-12 border-foreground/10 border">
107-
<h1 className="text-xl font-bold">Order Summary</h1>
108-
<div className="flex flex-col gap-4 pt-4">
109-
<div className="flex justify-between">
110-
<span className="text-muted-foreground font-medium">
111-
Subtotal
112-
</span>
113-
<span className="font-medium">$23</span>
114-
</div>
115-
<div className="flex justify-between">
116-
<span className="text-muted-foreground font-medium">
117-
Delivery fee
118-
</span>
119-
<span className="font-medium">$23</span>
120-
</div>
121-
<Separator className="bg-primary-foreground" />
122-
<div className="flex justify-between">
123-
<span className="font-bold">Total</span>
124-
<span className="font-bold">$23</span>
112+
<div className="basis-5/12">
113+
<div className="p-4 outline-4 outline-primary-foreground rounded-4xl border-foreground/10 border bg-background sticky top-32">
114+
<h1 className="text-xl font-bold">
115+
Order Summary
116+
</h1>
117+
<div className="flex flex-col gap-4 pt-4">
118+
<div className="flex justify-between">
119+
<span className="text-muted-foreground font-medium">
120+
Subtotal
121+
</span>
122+
<span className="font-medium">$23</span>
123+
</div>
124+
<div className="flex justify-between">
125+
<span className="text-muted-foreground font-medium">
126+
Delivery fee
127+
</span>
128+
<span className="font-medium">$23</span>
129+
</div>
130+
<Separator className="bg-primary-foreground" />
131+
<div className="flex justify-between">
132+
<span className="font-bold">Total</span>
133+
<span className="font-bold">$23</span>
134+
</div>
135+
<Button className="p-7 rounded-full cursor-pointer">
136+
Go to Checkout
137+
</Button>
125138
</div>
126-
<Button className="p-7 rounded-full cursor-pointer">
127-
Go to Checkout
128-
</Button>
129139
</div>
130140
</div>
131141
</div>
132142
</section>
133143
</main>
134144
<Footer />
135-
</>
145+
</div>
136146
);
137147
}

0 commit comments

Comments
 (0)