feat(rbac): ui components and hooks for rbac

frontend/src/components/v2/Accordion/Accordion.tsx

@@ -0,0 +1,77 @@
+import { forwardRef } from "react";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { twMerge } from "tailwind-merge";
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.AccordionItemProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <AccordionPrimitive.Item
+      className={twMerge(
+        "focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]",
+        className
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+    </AccordionPrimitive.Item>
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+
+export const AccordionTrigger = forwardRef<
+  HTMLButtonElement,
+  AccordionPrimitive.AccordionTriggerProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      className={twMerge(
+        "text-violet11 shadow-mauve6 hover:bg-mauve2 group flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none",
+        className
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+      <FontAwesomeIcon
+        icon={faChevronDown}
+        className="text-violet10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = forwardRef<
+  HTMLDivElement,
+  AccordionPrimitive.AccordionContentProps
+>(({ children, className, ...props }, forwardedRef) => (
+  <AccordionPrimitive.Content
+    className={twMerge(
+      "text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]",
+      className
+    )}
+    {...props}
+    ref={forwardedRef}
+  >
+    <div className="py-[15px] px-5">{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = "AccordionContent";
+
+// ref: https://www.radix-ui.com/primitives/docs/components/accordion#root
+export const Accordion = ({
+  children,
+  ...props
+}: AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) => (
+  <AccordionPrimitive.Root
+    className="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
+    {...props}
+  >
+    {children}
+  </AccordionPrimitive.Root>
+);

frontend/src/components/v2/Accordion/index.tsx

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";