Merge pull request #1 from octoml/add-dropdown

feat: add dropdown

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "next": "14.1.0",
     "react": "^18",
+    "react-aria-components": "^1.1.1",
     "react-dom": "^18"
   },
   "devDependencies": {

src/components/Select/Select.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as SelectStories from './Select.stories';
+
+<Meta of={SelectStories} />
+
+# Select
+
+<Canvas of={SelectStories.Default} />
+
+### Props Table
+
+<ArgTypes />

src/components/Select/Select.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Select from ".";
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  decorators: [
+    (Story) => (
+      <div className="container">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  args: {
+    listTitle: "Year",
+    listItems: [
+      {
+        value: "2024",
+        label: "2024",
+      },
+      {
+        value: "2023",
+        label: "2023",
+      },
+    ],
+  },
+};

src/components/Select/Select.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import {
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as ReactAriaSelect,
+  SelectValue,
+} from "react-aria-components";
+
+interface listItem {
+  value: string;
+  label: string;
+}
+interface SelectProps {
+  listTitle?: string;
+  listItems: listItem[];
+}
+
+const Select: FC<SelectProps> = ({ listTitle, listItems }) => (
+  <ReactAriaSelect className="select" defaultSelectedKey={"2024"}>
+    {listTitle && <Label>{listTitle}</Label>}
+    <Button>
+      <SelectValue />
+      <span aria-hidden="true" className="icon">
+        <img src="/icons/chevron.svg" />
+      </span>
+    </Button>
+    <Popover className="select-list">
+      <ListBox>
+        {listItems?.map((item) => (
+          <ListBoxItem id={item?.value}>{item?.label}</ListBoxItem>
+        ))}
+      </ListBox>
+    </Popover>
+  </ReactAriaSelect>
+);
+
+export default Select;

src/components/Select/index.ts

@@ -0,0 +1,3 @@
+import Select from "./Select";
+
+export default Select;

src/styles/components/select.css

@@ -0,0 +1,40 @@
+.select {
+  @apply flex items-center gap-3;
+  .react-aria-Label {
+    @apply font-normal text-gray-500 dark:text-gray-50;
+  }
+  & > button {
+    @apply flex w-[100px] items-center justify-between gap-3 rounded border border-gray-300 bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:text-white dark:shadow-dark;
+    &[data-hovered],
+    &[data-focused] {
+      @apply border-gray-500 bg-gray-50 bg-none outline-none dark:border-gray-300 dark:bg-opacity-5;
+    }
+
+    .icon img {
+      @apply w-3;
+    }
+  }
+}
+
+.select-list {
+  @apply w-[var(--trigger-width)] rounded border border-gray-300 bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:shadow-dark;
+  &[data-hovered],
+  &[data-focused] {
+    @apply outline-none;
+  }
+  .react-aria-ListBoxItem {
+    @apply relative px-4 py-9px;
+
+    &[data-hovered],
+    &[data-focused] {
+      @apply outline-none;
+    }
+    &[data-hovered],
+    &[data-focus-visible] {
+      @apply cursor-pointer bg-gray-200 dark:bg-opacity-10;
+    }
+    &[data-selected] {
+      @apply after:absolute after:right-3 after:top-[calc(50%-8px)] after:block after:h-4 after:w-4 after:bg-[url('/icons/check.svg')] after:bg-no-repeat;
+    }
+  }
+}

src/styles/main.css

@@ -1,7 +1,8 @@
 @import "./global.css";
+@import "./components/chat.css";
+@import "./components/footer.css";
 @import "./components/header.css";
 @import "./components/hero.css";
-@import "./components/loading.css";
 @import "./components/interactive.css";
-@import "./components/chat.css";
-@import "./components/footer.css";
+@import "./components/loading.css";
+@import "./components/select.css";