React/topic

js/react/lib/components/topic/index.ts

@@ -0,0 +1,3 @@
+export * from "./topic.component";
+export * from "./subtopic.component";
+export * from "./topic.types";

js/react/lib/components/topic/subtopic.component.tsx

@@ -0,0 +1,16 @@
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { TopicElement } from "./topic.types";
+import { withAs } from "@/utils/hoc";
+
+export const SubTopic = withAs(
+  (Component, { level, state, title, ...rest }: TopicElement) => {
+    return (
+      <Component {...rest} tabIndex={0} className="rustlanges-subtopic">
+        <Level variant={level} />
+        <span className="rustlanges-subtopic__title">{title}</span>
+        <Badge type="default" variant={state} />
+      </Component>
+    );
+  }
+);

js/react/lib/components/topic/topic.component.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import { ArrowDown } from "@/icons";
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { TopicElement } from "./topic.types";
+
+type TopicProps = PropsWithChildren & TopicElement;
+export const Topic = ({ level, title, state, children }: TopicProps) => {
+  return (
+    <details className="rustlanges-topic">
+      <summary className="rustlanges-topic__summary">
+        <Level as="span" variant={level} />
+        <span className="text-h6 rustlanges-topic__title">{title}</span>
+        <Badge type="default" variant={state} />
+        <ArrowDown />
+      </summary>
+      {children}
+    </details>
+  );
+};

js/react/lib/components/topic/topic.types.ts

@@ -0,0 +1,8 @@
+import { BadgeVariants } from "../badge/badge.const";
+import { LevelVariants } from "../level/level.const";
+
+export type TopicElement = {
+  level: LevelVariants;
+  title: string;
+  state: BadgeVariants;
+};

js/react/lib/index.ts

@@ -11,4 +11,5 @@ export * from "./components/radio";
 export * from "./components/badge";
 export * from "./components/dropdown";
 export * from "./components/calendar";
+export * from "./components/topic";
 export * from "./icons";

js/react/showcase/App.tsx

@@ -14,6 +14,8 @@ import {
   DropdownState,
   Calendar,
   CalendarRangeDate,
+  Topic,
+  SubTopic,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 import { useState } from "react";
@@ -279,6 +281,40 @@ export function App() {
         <Calendar type="multiple" onChange={setMultiple} value={multiple} />
         <Calendar type="range" onChange={setRange} value={range} />
       </ShowComponent>
+      <ShowComponent
+        component={Topic}
+        title="Topic"
+        propsDef={{
+          level: {
+            type: "string",
+            default: "n1",
+            options: ["n1", "n2", "n3", "op"],
+          },
+          title: { type: "string", default: "Tópico" },
+          state: {
+            type: "string",
+            default: "completed",
+            options: ["completed", "pending", "reading", "unread"],
+          },
+        }}
+      />
+      <ShowComponent
+        component={SubTopic}
+        title="Sub Topic"
+        propsDef={{
+          level: {
+            type: "string",
+            default: "n1",
+            options: ["n1", "n2", "n3", "op"],
+          },
+          title: { type: "string", default: "Tópico" },
+          state: {
+            type: "string",
+            default: "completed",
+            options: ["completed", "pending", "reading", "unread"],
+          },
+        }}
+      />
     </div>
   );
 }

styles/components.css

@@ -9,3 +9,4 @@
 @import "./components/radio.css";
 @import "./components/tag.css";
 @import "./components/text.css";
+@import "./components/topic.css";

styles/components/topic.css

@@ -0,0 +1,35 @@
+@layer component {
+  .rustlanges-topic {
+    @apply w-full;
+  }
+  .rustlanges-topic[open] svg {
+    @apply -rotate-180;
+  }
+
+  .rustlanges-topic__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rustlanges-topic__summary {
+    @apply grid w-full grid-cols-[auto_1fr_auto_auto] items-center gap-2 border-y border-black px-3 py-4;
+
+    & > svg {
+      @apply duration-400 size-6 transition;
+    }
+  }
+
+  .rustlanges-topic__title {
+    @apply text-neutral-950 dark:text-neutral-50;
+  }
+
+  .rustlanges-subtopic {
+    @apply grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 border-b px-6 py-2.5;
+    @apply border-b-gray dark:border-b-neutral-600;
+  }
+
+  .rustlanges-subtopic__title {
+    @apply text-neutral-950;
+    @apply desktop:text-sm text-xs;
+    @apply dark:text-neutral-50;
+  }
+}