From db6011756129e17eb1559c533f8bc56a962dd880 Mon Sep 17 00:00:00 2001
From: Sai Wong <mr.saiwong@gmail.com>
Date: Fri, 15 Nov 2024 17:46:26 -0800
Subject: [PATCH 1/3] added popover component

---
 components/atoms/index.ts              |  2 +
 components/atoms/popover/component.tsx | 63 ++++++++++++++++++++++++++
 components/atoms/popover/index.ts      |  2 +
 3 files changed, 67 insertions(+)
 create mode 100644 components/atoms/popover/component.tsx
 create mode 100644 components/atoms/popover/index.ts

diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index e372089..f655748 100644
--- a/components/atoms/index.ts
+++ b/components/atoms/index.ts
@@ -3,3 +3,5 @@ export * from './vertical-line';
 export * from './link-btn';
 export * from './card';
 export * from './tag';
+export * from './popover';
+export * from './btn';
diff --git a/components/atoms/popover/component.tsx b/components/atoms/popover/component.tsx
new file mode 100644
index 0000000..f8708c8
--- /dev/null
+++ b/components/atoms/popover/component.tsx
@@ -0,0 +1,63 @@
+'use client';
+import { cn } from '@/lib/cn';
+import { Btn } from '@/components/atoms/btn';
+import { useState, useEffect, useRef } from 'react';
+
+interface Props extends React.HTMLProps<HTMLDivElement> {
+  btn: React.ReactElement;
+  children?: React.ReactNode;
+}
+
+export const Popover: React.FC<Props> = ({
+  btn,
+  children,
+  className,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsVisible(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
+  return (
+    <div className={cn('flex flex-col items-center gap-sm')}>
+      <section ref={buttonRef} onClick={toggleVisibility}>
+        {btn}
+      </section>
+
+      {isVisible && (
+        <div
+          {...props}
+          className={cn(
+            'flex items-center rounded-md !border-line-width border-dashed border-light-neutral-gray bg-light-background p-lg text-light-primary',
+            className,
+          )}
+          ref={contentRef}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/components/atoms/popover/index.ts b/components/atoms/popover/index.ts
new file mode 100644
index 0000000..fb1ea5d
--- /dev/null
+++ b/components/atoms/popover/index.ts
@@ -0,0 +1,2 @@
+export { Popover as default } from './component';
+export * from './component';

From 9f532a79bde8c6c6fc21ac28495eb29d47a531de Mon Sep 17 00:00:00 2001
From: Sai <71161930+cywlol@users.noreply.github.com>
Date: Fri, 15 Nov 2024 18:13:42 -0800
Subject: [PATCH 2/3] remove text

---
 components/atoms/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index 72ddd62..bc5b5d6 100644
--- a/components/atoms/index.ts
+++ b/components/atoms/index.ts
@@ -3,9 +3,6 @@ export * from './vertical-line';
 export * from './link-btn';
 export * from './card';
 export * from './tag';
-<<<<<<< HEAD
 export * from './popover';
 export * from './btn';
-=======
 export * from './file-input';
->>>>>>> 41b38d3b10d20f39a49a6772f352ea37ce469e04

From 5d3b3c5b838590e75bd8e6c3da139878138540cf Mon Sep 17 00:00:00 2001
From: Sai Wong <mr.saiwong@gmail.com>
Date: Thu, 5 Dec 2024 18:30:41 -0800
Subject: [PATCH 3/3] changed section tag to btn

---
 components/atoms/popover/component.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/atoms/popover/component.tsx b/components/atoms/popover/component.tsx
index f8708c8..e85efc2 100644
--- a/components/atoms/popover/component.tsx
+++ b/components/atoms/popover/component.tsx
@@ -4,12 +4,12 @@ import { Btn } from '@/components/atoms/btn';
 import { useState, useEffect, useRef } from 'react';
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
-  btn: React.ReactElement;
+  text: React.ReactNode;
   children?: React.ReactNode;
 }
 
 export const Popover: React.FC<Props> = ({
-  btn,
+  text,
   children,
   className,
   ...props
@@ -42,9 +42,9 @@ export const Popover: React.FC<Props> = ({
 
   return (
     <div className={cn('flex flex-col items-center gap-sm')}>
-      <section ref={buttonRef} onClick={toggleVisibility}>
-        {btn}
-      </section>
+      <Btn variant="primary" ref={buttonRef} onClick={toggleVisibility}>
+        {text}
+      </Btn>
 
       {isVisible && (
         <div