Fixes & Updates (#704)

* Adding Dropdown Component

* Styling Issues

* Wishlist Fix

* Fixes for Wishlist View

* Hearts now work again

* Rollback ts

* Removing extra config to disable BigCommerce

* Fixes for Wishlist View

* Remove transition/animation for mobile

* New Updates.

* New Updates.

* Dropdown fix

* Polish

* export

* export

* revert tsconfig

Co-authored-by: Luis Alvarez D. <luis@vercel.com>

Co-authored-by: Dom Sip <dom@vercel.com>
Co-authored-by: Luis Alvarez D. <luis@vercel.com>

site/components/ui/Dropdown/Dropdown.module.css

@@ -0,0 +1,32 @@
+.root {
+  @apply bg-accent-0;
+  animation: none;
+  transition: none;
+  min-width: 100%;
+}
+
+@media screen(lg) {
+  .root {
+    @apply bg-accent-0;
+    box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
+      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    min-width: 14rem;
+    will-change: transform, opacity;
+    animation-duration: 600ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+    animation-name: slideIn;
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}

site/components/ui/Dropdown/Dropdown.tsx

@@ -0,0 +1,22 @@
+import cn from 'clsx'
+import React from 'react'
+import s from './Dropdown.module.css'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+export const Dropdown = DropdownMenu.Root
+export const DropdownMenuItem = DropdownMenu.Item
+export const DropdownTrigger = DropdownMenu.Trigger
+export const DropdownMenuLabel = DropdownMenu.Label
+export const DropdownMenuGroup = DropdownMenu.Group
+
+export const DropdownContent = React.forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode } & DropdownMenu.DropdownMenuContentProps &
+    React.RefAttributes<HTMLDivElement>
+>(function DropdownContent({ children, className, ...props }, forwardedRef) {
+  return (
+    <DropdownMenu.Content ref={forwardedRef} sideOffset={8} {...props}>
+      <div className={cn(s.root, className)}>{children}</div>
+    </DropdownMenu.Content>
+  )
+})