From e1616e56fe657d5704b853a52920c9cc7c690a41 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 8 Mar 2026 12:13:30 +0800
Subject: [PATCH 1/2] feat: add dropdown menu

---
 src/components/core/dropdown-menu.js | 51 ++++++++++++++++++++++++++++
 tailwind.config.js                   |  5 ++-
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/core/dropdown-menu.js

diff --git a/src/components/core/dropdown-menu.js b/src/components/core/dropdown-menu.js
new file mode 100644
index 0000000..e837c45
--- /dev/null
+++ b/src/components/core/dropdown-menu.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu } from '@headlessui/react';
+import cn from 'classnames';
+
+const DropdownMenu = ({ triggerButton, items, align = 'left', className }) => {
+  return (
+    <Menu as="div" className={cn('relative inline-block', className)}>
+      <Menu.Button as={React.Fragment}>{triggerButton}</Menu.Button>
+      <Menu.Items
+        className={cn(
+          'absolute z-50 mt-2 py-2 rounded-lg bg-white shadow-shadow1',
+          align === 'right' ? 'right-0' : 'left-0'
+        )}
+      >
+        {items.map((item, index) => {
+          return (
+            <Menu.Item key={index}>
+              {({ active }) => (
+                <button
+                  type="button"
+                  onClick={item.onClick}
+                  className={cn(
+                    'w-full px-3 py-2 text-sm leading-[1.4] text-text-primary text-left',
+                    active ? 'bg-bg-main' : 'bg-white'
+                  )}
+                >
+                  <span>{item.label}</span>
+                </button>
+              )}
+            </Menu.Item>
+          );
+        })}
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+DropdownMenu.propTypes = {
+  triggerButton: PropTypes.element.isRequired,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      onClick: PropTypes.func,
+    })
+  ).isRequired,
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+};
+
+export default DropdownMenu;
diff --git a/tailwind.config.js b/tailwind.config.js
index 0cbc627..620dae0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -73,7 +73,7 @@ module.exports = {
         primary: v2ColorTokens.blue[700],
         error: v2ColorTokens.red[600],
         bg: {
-          main: '#F8FCFF',
+          main: v2ColorTokens.blue[50],
           disabled: v2ColorTokens.gray[100],
         },
         border: {
@@ -87,6 +87,9 @@ module.exports = {
           disabled: v2ColorTokens.gray[400],
         },
       },
+      boxShadow: {
+        shadow1: '0px 0px 4px 0px rgba(0, 0, 0, 0.1)',
+      },
     },
   },
   safelist: [

From f65f75c349823b5b0d6ca23a0aa8d8b9e619e1c6 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 8 Mar 2026 21:25:14 +0800
Subject: [PATCH 2/2] feat: menu item can either anchor link or button

---
 src/components/core/dropdown-menu.js | 39 +++++++++++++++++++---------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/core/dropdown-menu.js b/src/components/core/dropdown-menu.js
index e837c45..ce0f674 100644
--- a/src/components/core/dropdown-menu.js
+++ b/src/components/core/dropdown-menu.js
@@ -16,18 +16,32 @@ const DropdownMenu = ({ triggerButton, items, align = 'left', className }) => {
         {items.map((item, index) => {
           return (
             <Menu.Item key={index}>
-              {({ active }) => (
-                <button
-                  type="button"
-                  onClick={item.onClick}
-                  className={cn(
-                    'w-full px-3 py-2 text-sm leading-[1.4] text-text-primary text-left',
-                    active ? 'bg-bg-main' : 'bg-white'
-                  )}
-                >
-                  <span>{item.label}</span>
-                </button>
-              )}
+              {({ active }) =>
+                item.href ? (
+                  <a
+                    href={item.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={cn(
+                      'block w-full px-3 py-2 text-sm leading-[1.4] text-text-primary text-left',
+                      active ? 'bg-bg-main' : 'bg-white'
+                    )}
+                  >
+                    <span>{item.label}</span>
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={item.onClick}
+                    className={cn(
+                      'w-full px-3 py-2 text-sm leading-[1.4] text-text-primary text-left',
+                      active ? 'bg-bg-main' : 'bg-white'
+                    )}
+                  >
+                    <span>{item.label}</span>
+                  </button>
+                )
+              }
             </Menu.Item>
           );
         })}
@@ -42,6 +56,7 @@ DropdownMenu.propTypes = {
     PropTypes.shape({
       label: PropTypes.string.isRequired,
       onClick: PropTypes.func,
+      href: PropTypes.string,
     })
   ).isRequired,
   align: PropTypes.oneOf(['left', 'right']),