From 6fdc5418309b7e03e72978763b43d667675fd809 Mon Sep 17 00:00:00 2001 From: Akhilnair1306 <111660827+Akhilnair1306@users.noreply.github.com> Date: Thu, 23 Oct 2025 18:48:42 +0530 Subject: [PATCH] new/terminal-inspired-accordion --- .../react/terminal-accordion/README.md | 107 ++++++++++++++++++ .../terminal-accordion/TerminalAccordion.jsx | 88 ++++++++++++++ .../react/terminal-accordion/component.json | 14 +++ 3 files changed, 209 insertions(+) create mode 100644 components/section/react/terminal-accordion/README.md create mode 100644 components/section/react/terminal-accordion/TerminalAccordion.jsx create mode 100644 components/section/react/terminal-accordion/component.json diff --git a/components/section/react/terminal-accordion/README.md b/components/section/react/terminal-accordion/README.md new file mode 100644 index 0000000..1d128a3 --- /dev/null +++ b/components/section/react/terminal-accordion/README.md @@ -0,0 +1,107 @@ +# TerminalAccordion (React) + +A cyberpunk-inspired, terminal-themed accordion component built with React. Features command-line aesthetics, smooth animations, and a retro hacker vibe perfect for displaying expandable content with style. + +--- + +## Features + +- **Terminal Aesthetics** - Command-line inspired design with monospace fonts and neon accents +- **Cyberpunk Theme** - Dark background with neon green (#00FF41) and cyan (#00D9FF) colors +- **Smooth Animations** - Fluid expand/collapse transitions with rotating chevron indicators +- **Fully Responsive** - Works seamlessly across desktop, tablet, and mobile devices +- **Accessible** - Built with ARIA attributes and keyboard navigation support +- **Lightweight** - Minimal dependencies, optimized performance +- **Single Expansion** - Only one item can be expanded at a time for focused viewing +- **Hover Effects** - Interactive glowing borders and background highlights + +--- + +## 📦 Usage + +This component is used for accordion. + +--- + + +This component relies on the following: + +- **React** +- **Tailwind CSS** (for styling) +- **react-icons/fa** (for icons) + +--- + +## ⚙️ Installation + +Install the required icons package: + +```bash +npm install react-icons +# or +pnpm add react-icons +# or +yarn add react-icons +``` + +--- + +## Usage + +This file exports a preview wrapper `App` that renders the card for the docs site. To use the component in your app, import or copy the `SplitLoginCard` function and render it inside a page/container: + +```jsx +import React from 'react'; +import SplitLoginCard from './SplitLoginCard'; // if you export SplitLoginCard from the file + +export default function AuthPage() { + return ( +
+ +
+ ); +} +``` + +--- + +## ⚙️ Customization + +- **Social providers:** Edit the internal `socialProviders` array in `SplitLoginCard.jsx`. + + ```jsx + const socialProviders = [ + { name: 'Google', icon: FaGoogle, handler: () => handleSocialAuth('Google') }, + { name: 'GitHub', icon: FaGithub, handler: () => handleSocialAuth('GitHub') }, + // add more providers if needed + ]; + ``` + +- **Branding:** Update the image `src`, left title, and subtitle in the left pane. +- **Theming:** Adjust Tailwind classes to match your design system. +- **Auth logic:** Replace placeholder `setTimeout` calls in `handleAuthSubmit` and `handleSocialAuth` with real API calls. + +--- + +## 🔍 Behavior overview + +- Shows 2 social provider buttons by default (`slice(0, 2)`). +- Toggles between Login and Sign Up modes with dedicated UI text. +- Shows “I accept Terms” checkbox on Sign Up only. +- Shows “Forgot your password?” link on Login only. +- Password field supports visibility toggle using `FiEye`/`FiEyeOff`. +- Loading states use `FaSpinner` (social and submit buttons). + +--- + +## ♿ Accessibility + +- Inputs use proper `autoComplete` attributes and hidden labels. +- Interactive controls are buttons with focus styles and disabled states. +- Icons are decorative; labels provide context where needed. + +--- + +## 📄 License + +MIT diff --git a/components/section/react/terminal-accordion/TerminalAccordion.jsx b/components/section/react/terminal-accordion/TerminalAccordion.jsx new file mode 100644 index 0000000..66aede6 --- /dev/null +++ b/components/section/react/terminal-accordion/TerminalAccordion.jsx @@ -0,0 +1,88 @@ + +import { BiChevronRight } from 'react-icons/bi' + +const items = [ + { + id: "item-1", + title: "System Information", + command: "system --info", + content: + "Terminal-inspired accordion built with React. Features smooth animations, command-line aesthetics, and a retro hacker vibe. Perfect for displaying hierarchical information in a unique way.", + }, + { + id: "item-2", + title: "Configuration", + command: "config --list", + content: + "Customize the appearance with CSS variables. Supports dark mode, custom colors, and responsive design. All components are built with accessibility in mind.", + }, + { + id: "item-3", + title: "Documentation", + command: "docs --open", + content: + "Each accordion item can contain any content you want. Use it for FAQs, settings, code examples, or any expandable content that needs a terminal aesthetic.", + }, + { + id: "item-4", + title: "Advanced Features", + command: "features --advanced", + content: + "Smooth transitions, keyboard navigation, and semantic HTML. Built with performance in mind using React hooks and CSS animations.", + }, +] +const TerminalAccordion = () => { + const [expandedId, setExpandedId] = useState(null) + + const toggleItem = (id) => { + setExpandedId(expandedId === id ? null : id) + } + return ( +
+ {items.map((item) => ( +
+ {/* Header */} + + + {/* Content */} +
+
+
+ > {item.content} +
+
Process completed successfully
+
+
+
+ ))} +
+ ) +} + +export default TerminalAccordion \ No newline at end of file diff --git a/components/section/react/terminal-accordion/component.json b/components/section/react/terminal-accordion/component.json new file mode 100644 index 0000000..32a92f6 --- /dev/null +++ b/components/section/react/terminal-accordion/component.json @@ -0,0 +1,14 @@ +{ + "name": "Terminal-Accordion", + "category": "section", + "framework": "react", + "tags": [ "responsive"], + "author": "Akhilnair1306", + "license": "MIT", + "version": "1.0.0", + "preview": "A cyberpunk-inspired, terminal-themed accordion component built with React. Features command-line aesthetics, smooth animations, and a retro hacker vibe perfect for displaying expandable content with style.", + "demoUrl": "", + "props": [ + + ] + } \ No newline at end of file