style(component): improve the accordian component (#320)

Author: vasucp1207

packages/kit-headless/src/components/accordion/accordion.tsx

@@ -69,6 +69,21 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
       div.item .content {
         display: none;
       }
+      div.item>button {
+        border-bottom: 1px solid #e2e8f0;
+        display: flex;
+        flex-direction: items-start;
+        align-items: center;
+        padding-left: 8px;
+      }
+      div.item>button:hover {
+        text-decoration: underline;
+      }
+      div.item[open]>button::after {
+        rotate: 180deg;
+        top: 30%;
+        transition: 0.2s ease-in-out;
+      }
       div.item[open] .content {
        display: block;
       }

packages/kit-tailwind/src/components/accordion/accordion.tsx

@@ -24,7 +24,7 @@ export const Accordion = component$((props: AccordionProps) => {
   const { class: classNames, ...rest } = props;
   return (
     <HeadlessAccordion
-      class={clsq('border collapse collapse-arrow', classNames)}
+      class={clsq('collapse collapse-arrow', classNames)}
       {...rest}
     >
       <Slot />
@@ -35,10 +35,7 @@ export const Accordion = component$((props: AccordionProps) => {
 export const AccordionItem = component$((props: AccordionItemProps) => {
   const { class: classNames, ...rest } = props;
   return (
-    <HeadlessAccordionItem
-      class={clsq('collapse-title border', classNames)}
-      {...rest}
-    >
+    <HeadlessAccordionItem class={clsq('collapse-title', classNames)} {...rest}>
       <Slot />
     </HeadlessAccordionItem>
   );