docs(SWUI-20): Add Popover to SwaprUI Website (#17)

* chore: create PopoverSection component with examples
* refactor: abstract Section component to be reused
* docs: add PopoverSection to SwaprUI Website

apps/website/app/ui/page.tsx

@@ -48,7 +48,7 @@ import {
   ButtonLink,
 } from "swapr-ui";
 
-import { ThemeSwitch } from "@/components";
+import { PopoverSection, Section, ThemeSwitch } from "@/components";
 
 const colorsKeysBanList = ["transparent", "inherit"];
 const fullConfig = resolveConfig(tailwindConfig);
@@ -513,6 +513,7 @@ export default function UI() {
             </Dialog>
           </div>
         </Section>
+        <PopoverSection />
         <Section>
           <h2 className="text-2xl font-semibold">Tabs</h2>
           <div className="space-y-5">
@@ -881,11 +882,6 @@ export default function UI() {
     </main>
   );
 }
-
-const Section = ({ children }: PropsWithChildren) => {
-  return <section className="space-y-4 py-12 border-b">{children}</section>;
-};
-
 interface ButtonSectionProps extends PropsWithChildren {
   btnList: {
     headers: Array<string>;

apps/website/components/PopoverSection/PopoverSection.tsx

@@ -0,0 +1,37 @@
+import { Section } from "@/components";
+import {
+  PopoverBasic,
+  PopoverSlippageSettings,
+  PopoverWithHeader,
+} from "./examples";
+
+interface PopoverList {
+  headers: Array<string>;
+  examples: Array<() => JSX.Element>;
+}
+
+const popoverList: PopoverList = {
+  headers: ["Basic", "With Header", "Settings example"],
+  examples: [PopoverBasic, PopoverWithHeader, PopoverSlippageSettings],
+};
+
+export const PopoverSection = () => (
+  <Section>
+    <h2 className="text-2xl font-semibold">Popovers</h2>
+    <div className="grid items-center space-y-2.5 lg:space-y-0 lg:grid-cols-3 lg:gap-4">
+      {popoverList.headers.map((header, index) => (
+        <div
+          key={index}
+          className="hidden uppercase text-xs lg:block font-semibold bg-gray-200 text-center"
+        >
+          {header}
+        </div>
+      ))}
+      {popoverList.examples.map((Example, index) => (
+        <div key={index} className="flex items-center justify-center">
+          <Example />
+        </div>
+      ))}
+    </div>
+  </Section>
+);

apps/website/components/PopoverSection/examples.tsx

@@ -0,0 +1,87 @@
+import {
+  Button,
+  ChipButton,
+  Icon,
+  IconButton,
+  Popover,
+  PopoverContent,
+  PopoverContentHeader,
+  PopoverTrigger,
+  TabGroup,
+  TabHeader,
+  TabStyled,
+} from "swapr-ui";
+import { Root as Separator } from "@radix-ui/react-separator";
+
+const SettingsPopoverContent = () => (
+  <div className="space-y-2">
+    <div className="flex items-center mx-4 text-text-low-em">
+      <p className="font-bold text-xs">MAX SLIPPAGE</p>
+      <Icon className="ml-1 text-text-low-em" name="info-fill" size={14} />
+    </div>
+    <TabGroup
+      as="div"
+      onChange={(index: number) =>
+        console.log("Changed selected tab to:", index)
+      }
+      className="mx-4"
+    >
+      <TabHeader className="overflow-x-auto md:overflow-x-visible last:right-0 flex justify-between">
+        <div className="flex space-x-3">
+          <TabStyled>Auto</TabStyled>
+          <TabStyled>0.1%</TabStyled>
+          <TabStyled>0.5%</TabStyled>
+        </div>
+        <ChipButton>3 %</ChipButton>
+      </TabHeader>
+    </TabGroup>
+    <p className="font-semibold mt-4 mx-4 text-text-primary-main text-sm">
+      Custom slippage: 3%
+    </p>
+    <div className="bg-surface-danger-accent-1 font-semibold mx-4 px-3 py-2 rounded-8 text-text-danger-em text-sm">
+      The slippage you selected is greater than what is required to perform this
+      transaction. We recommend selecting the Auto Slippage option for this
+      transaction.
+    </div>
+    <Separator decorative className="h-[1px] bg-outline-base-em" />
+    <div className="flex items-center mx-4 text-text-low-em">
+      <p className="font-bold text-xs">TRANSACTION DEADLINE</p>
+      <Icon className="ml-1 text-text-low-em" name="info-fill" size={14} />
+    </div>
+    <ChipButton className="mx-4">10 mins</ChipButton>
+  </div>
+);
+
+export const PopoverBasic = () => (
+  <Popover>
+    <PopoverTrigger>
+      <Button>Open Popup</Button>
+    </PopoverTrigger>
+    <PopoverContent>
+      <p>This is a basic content example</p>
+    </PopoverContent>
+  </Popover>
+);
+
+export const PopoverWithHeader = () => (
+  <Popover>
+    <PopoverTrigger>
+      <Button>With header</Button>
+    </PopoverTrigger>
+    <PopoverContent className="max-w-md px-0">
+      <PopoverContentHeader title="Settings" />
+      <SettingsPopoverContent />
+    </PopoverContent>
+  </Popover>
+);
+
+export const PopoverSlippageSettings = () => (
+  <Popover>
+    <PopoverTrigger>
+      <IconButton name="settings" />
+    </PopoverTrigger>
+    <PopoverContent className="max-w-md px-0">
+      <SettingsPopoverContent />
+    </PopoverContent>
+  </Popover>
+);

apps/website/components/PopoverSection/index.ts

@@ -0,0 +1 @@
+export * from "./PopoverSection";

apps/website/components/Section.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+
+export const Section = ({ children }: PropsWithChildren) => (
+  <section className="space-y-4 py-12 border-b">{children}</section>
+);

apps/website/components/index.ts

@@ -1 +1,3 @@
+export * from "./PopoverSection";
+export * from "./Section";
 export * from "./ThemeSwitch";