refactor: feedback

Author: tractorss

src/lib/accordion/accordion-item.tsx

@@ -23,12 +23,12 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }) => {
   const [ref, { height }] = useElementSize();
   return (
-    <div className="mt-2 mb-2">
+    <div className="my-2">
       <Button
         className={clsx(
           "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
           "hover-medium-blue hover-short-transition hover:cursor-pointer",
-          "rounded-[3px] pt-[11.5px] pr-8 pb-[11.5px] pl-8",
+          "rounded-[3px] px-8 py-[11.5px]",
           "flex w-full items-center justify-between",
         )}
         onPress={() => setExpanded(expanded ? -1 : index)}

src/lib/accordion/custom.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
+import clsx from "clsx";
 
 interface AccordionItem {
   title: ReactNode;
@@ -8,12 +9,20 @@ interface AccordionItem {
 
 interface AccordionProps {
   items: AccordionItem[];
+  className?: string;
 }
 
-const CustomAccordion: React.FC<AccordionProps> = ({ items, ...props }) => {
+const CustomAccordion: React.FC<AccordionProps> = ({
+  items,
+  className,
+  ...props
+}) => {
   const [expanded, setExpanded] = useState(-1);
   return (
-    <div className="box-border flex w-[1000px] flex-col" {...props}>
+    <div
+      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      {...props}
+    >
       {items.map((item, index) => (
         <AccordionItem
           key={index}

src/lib/accordion/index.tsx

@@ -12,23 +12,28 @@ interface AccordionItem {
 interface AccordionProps {
   items: AccordionItem[];
   defaultExpanded?: number;
+  className?: string;
 }
 
 const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => (
   <>
     {item.icon ?? (item.Icon && <item.Icon />)}
-    <p className={clsx("w-fit", "text-center font-semibold")}>{item.title}</p>
+    <p className="w-fit text-center font-semibold">{item.title}</p>
   </>
 );
 
 const Accordion: React.FC<AccordionProps> = ({
   items,
   defaultExpanded,
+  className,
   ...props
 }) => {
   const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
   return (
-    <div className="box-border flex w-[1000px] flex-col" {...props}>
+    <div
+      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      {...props}
+    >
       {items.map((item, index) => (
         <AccordionItem
           key={index}