Feature component disclosure interaction

animata/button/disclosure-interaction.stories.tsx

@@ -0,0 +1,19 @@
+import DisclosureInteraction from "@/animata/button/disclosure-interaction";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Button/Disclosure Interaction",
+  component: DisclosureInteraction,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof DisclosureInteraction>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};

animata/button/disclosure-interaction.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Calendar, ClipboardList, FileText, Flag, Folder, Trophy, XCircle } from "lucide-react";
+
+const DisclosureInteraction: React.FC = () => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  // Toggle function to show and hide the sheet
+  const toggleSheet = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className="relative inline-block text-center">
+      <h1 className="mb-8 text-xl font-semibold">Create New</h1>
+
+      {/* Main button to trigger the expansion, shifted down with more margin */}
+      <button
+        className="mb-12 rounded-lg bg-[#f9f7f3] px-4 py-2 text-lg shadow-md transition hover:bg-[#f1e9dd]"
+        onClick={toggleSheet}
+      >
+        Create New +
+      </button>
+
+      {/* Disclosure sheet (only shown if isExpanded is true) */}
+      {isExpanded && (
+        <div className="absolute left-1/2 top-0 mt-4 w-80 -translate-x-1/2 transform rounded-2xl bg-white shadow-lg">
+          {/* Header Section (lighter beige background) */}
+          <div className="flex items-center justify-between rounded-t-2xl bg-[#faf5e9] px-4 py-3">
+            <span className="font-semibold text-gray-700">Create New</span>
+            {/* Close button using icon */}
+            <button className="text-gray-500 hover:text-gray-700" onClick={toggleSheet}>
+              <XCircle className="h-6 w-6" />
+            </button>
+          </div>
+
+          {/* Body Section (white background with rounded icons and grid layout) */}
+          <div className="grid grid-cols-3 gap-4 rounded-b-2xl bg-white px-6 py-4">
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <Folder className="h-6 w-6" />
+              <span className="text-sm">Project</span>
+            </button>
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <ClipboardList className="h-6 w-6" />
+              <span className="text-sm">Task</span>
+            </button>
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <FileText className="h-6 w-6" />
+              <span className="text-sm">Note</span>
+            </button>
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <Trophy className="h-6 w-6" />
+              <span className="text-sm">Goal</span>
+            </button>
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <Flag className="h-6 w-6" />
+              <span className="text-sm">Milestone</span>
+            </button>
+            <button className="flex flex-col items-center space-y-1 rounded-lg p-3 text-gray-600 transition hover:bg-[#f1e9dd]">
+              <Calendar className="h-6 w-6" />
+              <span className="text-sm">Reminder</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DisclosureInteraction;

content/docs/button/disclosure-interaction.mdx

@@ -0,0 +1,52 @@
+---
+title: Disclosure Interaction
+description: The DisclosureInteraction component is an interactive button that expands into a small sheet when clicked. The sheet provides six options (e.g., Project, Task, Note, etc.), and includes a close button to collapse the sheet back to its original state. It features smooth animations for expanding and collapsing, and is styled with Tailwind CSS and lucide-react icons.
+author: IngaleChinmay04
+labels: ["interactive", "expandable", "button"]
+---
+
+<ComponentPreview name="button-disclosure-interaction--docs" />
+
+## Installation
+
+<Steps>
+<Step>Install dependencies</Step>
+
+```bash
+yarn add framer-motion lucide-react
+```
+
+<Step>Update `tailwind.config.js`</Step>
+Add the following to your tailwind.config.js file.
+```json {4-12}
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        beige: "#faf5e9",
+        hoverBeige: "#f1e9dd",
+      },
+      borderRadius: {
+        '2xl': '1.5rem',
+      },
+    },
+  },
+};
+```
+<Step>Run the following command</Step>
+```bash
+mkdir -p components/animata/button && touch components/animata/button/disclosure-interaction.tsx
+```
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/button/disclosure-interaction.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [IngaleChinmay04](https://github.com/IngaleChinmay04)