Frontend: [Component] Auto-Generate Toggle & Info Note

[Emmzyemms]

Description: Implement the toggle switch for automated clip extraction and the processing time disclaimer.
Tasks:

Build a custom "Switch" component that matches the brand's green color when active.

Add the "Auto-generate clips" labels and subtext.

Place the "Estimated processing time" info text with the muted gray icon at the bottom.
Acceptance Criteria:

Toggle is keyboard accessible (Space/Enter to flip).

Text aligns correctly with the icon and stays responsive on small screens.
Labels: frontend, a11y

Figma: https://www.figma.com/design/tG5639slah2pH0Hy9ZJgCp/Clips?node-id=2-658&t=HeZoRF0fYCJiu0It-0

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 100 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Riel101]

@Riel101 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I would like to work on the Auto-Generate Toggle & Info Note component. As a frontend developer, I can implement a custom accessible switch styled with the brand’s green active state, add the labels and subtext, and position the estimated processing time info with icon while ensuring proper alignment, responsiveness, and keyboard accessibility.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Riel101 to this issue.

[drips-wave]

Congratulations, @Riel101! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Riel101: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[Riel101]

#32

#UI Component: Automated Clip Extraction Toggle
This module implements the Automated Clip Extraction interface as part of the ClipCash frontend. It features a custom-built, accessible switch component and a responsive layout for extraction settings.

##Features
Custom Accessible Switch: A high-performance toggle built from scratch to match ClipCash branding without the overhead of heavy UI libraries.

Keyboard Navigation: Full support for Tab focusing and Space/Enter activation (ARIA-compliant).

Responsive Layout: Fluid typography and flex-box alignment to ensure clarity on mobile and desktop views.

Branding: Integration of the signature green (bg-green-500) for active states.

##Components Created

1. Switch.tsx
   A low-level UI component located in frontend/components/ui/.

Logic: Uses a functional React state for immediate UI feedback.

Accessibility: Implements role="switch" and aria-checked attributes to ensure screen readers accurately report the state to users.

2. ExtractionSettings.tsx
   The feature-level component that houses the toggle, labels, and metadata.

Labels: Includes "Auto-generate clips" title and descriptive subtext.

Processing Disclaimer: A muted informational footer with an icon to manage user expectations regarding AI processing times.

##Tech Stack Used
Framework: Next.js 15 (App Router)

Styling: Tailwind CSS

Icons: Lucide-React (Muted gray variant)

##How to Use
To use the extraction settings in any page (e.g., the video upload dashboard), import the component as follows:

###TypeScript

import ExtractionSettings from '@/components/ExtractionSettings';

export default function UploadPage() {
return (

Video Settings

);
}

[Emins25]

Implemented the requested accessible auto-generate clips toggle, updated the create-page copy/subtext, added the estimated processing-time note, and refreshed the related tests.

PR: #117