Skip to content

feat: add cart drawer - #5

Merged
Abviol merged 20 commits into
devfrom
feat/cart-drawer
May 12, 2026
Merged

feat: add cart drawer#5
Abviol merged 20 commits into
devfrom
feat/cart-drawer

Conversation

@Abviol

@Abviol Abviol commented May 12, 2026

Copy link
Copy Markdown
Owner

Description

The task for this PR was to create the layout of the Cart Drawer component based on the Figma design without any functionalities and any logic behind.
The component consists of:

  • overlay (the dark blured background)
  • the cart drawer itself. The content is:
    • the title
    • the counter of total articles in cart
    • the scrollable content:
      • a section dedicated to recently added articles
      • a section dedicated to all the articles in user's cart
    • the sum up with the total price and buttons, which lead to the Cart and Checkout pages respectively
    • (if empty) a banner notifying about the empty state

The scrollable content and the empty state banner are rendered conditionally based on the number of items in the cart.

Changes

CartDrawer

  • create @/components/cartDrawer directory
  • create cartDrawer.tsx
  • create cartDrawer.css
  • implement the component's layout with the usage of radix-ui to handle all the possible edge cases (escape key handling, focus on drawer, make components behind the dialog non-clickable)

Demo

  • add <CartDrawer> demo

CartDrawerItem

  • move cartDrawerItems.tsx and .css to the @/components/cartDrawer/item/ directory
  • in .css, update the @reference relative path

Stepper

  • reduce the component's width my 20px for the small variant to fit in the <CartDrawerItem> component

globals.css

  • update the --foreground variable setting its color to the main design's one

Dependencies

  • install radix-ui/react-dialog
  • add pnpm-lock.yaml to .gitignore
  • delete pnpm-lock.yaml from repository

Checks

  • Doc in code updated

@vercel

vercel Bot commented May 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
scent Ready Ready Preview, Comment May 12, 2026 1:57pm

Issue: using setState inside a useEffect, which causes cascading rerenders.
Solution: remove.
@Abviol
Abviol merged commit dee2d79 into dev May 12, 2026
3 checks passed
@Abviol
Abviol deleted the feat/cart-drawer branch May 12, 2026 14:19
@Abviol Abviol changed the title Feat/cart drawer feat: add cart drawer May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant