✨Added dropdown button (#614)

src/components/Button/DropDownButton.tsx

@@ -0,0 +1,50 @@
+import Button from 'components/Button'
+import { ChevronDown } from 'components/Icons'
+import Text from 'components/Text'
+import { Tooltip } from 'components/Tooltip'
+
+interface Props extends ButtonProps {
+  items: DropDownItem[]
+  text: string
+}
+
+export default function DropDownButton(props: Props) {
+  return (
+    <Tooltip
+      content={<DropDown {...props} />}
+      type='info'
+      placement='bottom'
+      contentClassName='!bg-white/10 border border-white/20 backdrop-blur-xl !p-0'
+      interactive
+      hideArrow
+    >
+      <Button rightIcon={<ChevronDown />} iconClassName='w-3 h-3' {...props} />
+    </Tooltip>
+  )
+}
+
+interface DropDownProps {
+  items: DropDownItem[]
+}
+
+function DropDown(props: DropDownProps) {
+  return (
+    <div>
+      {props.items.map((item) => (
+        <DropDownItem key={item.text} {...item} />
+      ))}
+    </div>
+  )
+}
+
+function DropDownItem(props: DropDownItem) {
+  return (
+    <button
+      onClick={props.onClick}
+      className=' px-4 py-3 flex gap-2 items-center hover:bg-white/5 w-full [&:not(:last-child)]:border-b border-white/10'
+    >
+      <div className='h-5 w-5 flex justify-center'>{props.icon}</div>
+      <Text size='sm'>{props.text}</Text>
+    </button>
+  )
+}

src/components/HLS/Staking/Table/Columns/Manage.tsx

@@ -1,14 +1,32 @@
 import React from 'react'
 
-import Button from 'components/Button'
+import DropDownButton from 'components/Button/DropDownButton'
+import { ArrowDownLine, HandCoins, Plus } from 'components/Icons'
 
 export const MANAGE_META = { id: 'manage' }
 
+const ITEMS: DropDownItem[] = [
+  {
+    icon: <Plus width={16} />,
+    text: 'Deposit more',
+    onClick: () => {},
+  },
+  {
+    icon: <HandCoins />,
+    text: 'Repay',
+    onClick: () => {},
+  },
+  {
+    icon: <ArrowDownLine />,
+    text: 'Withdraw',
+    onClick: () => {},
+  },
+]
+
 interface Props {
   account: HLSAccountWithStrategy
 }
 
 export default function Manage(props: Props) {
-  // TODO: Impelement dropdown
-  return <Button text='Manage' color='tertiary' />
+  return <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
 }

src/components/Tooltip/TooltipContent.tsx

@@ -8,6 +8,7 @@ interface Props {
   content: ReactNode | string
   type: TooltipType
   hideArrow?: boolean
+  className?: string
 }
 
 export default function TooltipContent(props: Props) {
@@ -19,6 +20,7 @@ export default function TooltipContent(props: Props) {
           props.type === 'info' && 'bg-white/20',
           props.type === 'warning' && 'bg-warning',
           props.type === 'error' && 'bg-error',
+          props.className,
         )}
       >
         {typeof props.content === 'string' ? <Text size='xs'>{props.content}</Text> : props.content}

src/components/Tooltip/index.tsx

@@ -17,6 +17,8 @@ interface Props {
   interactive?: boolean
   underline?: boolean
   hideArrow?: boolean
+  contentClassName?: string
+  placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
 export const Tooltip = (props: Props) => {
@@ -34,8 +36,14 @@ export const Tooltip = (props: Props) => {
       interactive={props.interactive}
       animation={false}
       delay={[props.delay ?? 0, 0]}
+      placement={props.placement ?? 'top'}
       render={() => (
-        <TooltipContent hideArrow={props.hideArrow} type={props.type} content={props.content} />
+        <TooltipContent
+          hideArrow={props.hideArrow}
+          type={props.type}
+          content={props.content}
+          className={props.contentClassName}
+        />
       )}
     >
       {props.children ? (

src/types/interfaces/components/DropDownMenu.d.ts

@@ -0,0 +1,5 @@
+interface DropDownItem {
+  icon: import('react').ReactNode
+  onClick: () => void
+  text: string
+}