{"id":29245776,"url":"https://github.com/arnobt78/freelance-reusable-ui-components--nextjs","last_synced_at":"2025-07-03T22:38:15.061Z","repository":{"id":302666258,"uuid":"1013220670","full_name":"arnobt78/freelance-reusable-ui-components--NextJS","owner":"arnobt78","description":"This project is a pixel-perfect implementation of a category filter menu bar UI, built with Next.js, TypeScript, Tailwind CSS, and ESLint. The filter bar and dropdowns are styled to match a Figma design exactly, with custom icons, checkboxes, and responsive layout.","archived":false,"fork":false,"pushed_at":"2025-07-03T15:31:26.000Z","size":22617,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-03T16:24:22.271Z","etag":null,"topics":["app-router-nextjs","category-filter","category-menu","checkboxlist","custom-icons","dropdown-list","dropdown-menu","filter-dropdown","multi-filtering","multi-select-dropdown","nextjs","pixel-perfect","responsive-design","reusable-code","reusable-components","reusable-module","reusable-template","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://freelance-qllp.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-03T14:41:38.000Z","updated_at":"2025-07-03T15:35:07.000Z","dependencies_parsed_at":"2025-07-03T16:35:27.507Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/freelance-reusable-ui-components--NextJS","commit_stats":null,"previous_names":["arnobt78/freelance-qllp"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/freelance-reusable-ui-components--NextJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2Ffreelance-reusable-ui-components--NextJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2Ffreelance-reusable-ui-components--NextJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2Ffreelance-reusable-ui-components--NextJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2Ffreelance-reusable-ui-components--NextJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/freelance-reusable-ui-components--NextJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2Ffreelance-reusable-ui-components--NextJS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app-router-nextjs","category-filter","category-menu","checkboxlist","custom-icons","dropdown-list","dropdown-menu","filter-dropdown","multi-filtering","multi-select-dropdown","nextjs","pixel-perfect","responsive-design","reusable-code","reusable-components","reusable-module","reusable-template","tailwindcss","typescript"],"created_at":"2025-07-03T22:38:14.094Z","updated_at":"2025-07-03T22:38:15.010Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Freelance QLLP – Next.js Reusable UI Components\n\n## Next.js Reusable Category Filter UI\n\nThis project is a pixel-perfect implementation of a category filter menu bar UI, built with **Next.js**, **TypeScript**, **Tailwind CSS**, and **ESLint**. The filter bar and dropdowns are styled to match a Figma design exactly, with custom icons, checkboxes, and responsive layout.\n\n**Live-Demo:** [https://freelance-qllp.vercel.app/](https://freelance-qllp.vercel.app/)\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Features](#features)\n- [Getting Started](#getting-started)\n- [Project Structure](#project-structure)\n- [Usage](#usage)\n- [Learning \u0026 Customization](#learning--customization)\n- [License](#license)\n\n---\n\n## Project Summary\n\nThis UI project demonstrates how to build a highly customized, Figma-accurate filter menu bar for a category page. It features multi-select dropdowns for brands, flavors, and strength, with custom SVG icons, checkboxes, and divider lines. The code is modular, accessible, and easy to extend.\n\n---\n\n## Features\n\n- **Pixel-perfect**: Matches Figma/SVG design for dropdowns, checkboxes, icons, and layout\n- **Reusable Components**: `FilterDropDown` and `CategoryFilterMenuBar` are modular and customizable\n- **Multi-select Dropdowns**: Each filter supports independent, multi-select checkboxes\n- **Custom Icons**: Includes group/users icon, custom arrow, and checkboxes\n- **Responsive \u0026 Accessible**: Keyboard navigation, focus states, and mobile-friendly\n- **Bug Fixes**: Checkbox selection issues resolved; all options are unique and independently selectable\n- **Modern Stack**: Next.js (App Router), TypeScript, Tailwind CSS, ESLint\n\n---\n\n## Project Structure\n\n```bash\nsrc/\n  components/\n    CategoryFilter/\n      FilterDropDown.tsx      # Reusable dropdown with custom checkboxes\n      CategoryFilterMenuBar.tsx # Filter bar with dropdowns and dividers\n  app/\n    page.tsx                 # Renders the filter bar UI\n    layout.tsx, globals.css  # App layout and global styles\npublic/\n  ... (SVG assets)\nREADME.md\ndesktop_design.fig           # Figma design reference\n```\n\n---\n\n## Usage\n\n- The filter bar is rendered on the main page (`/src/app/page.tsx`).\n- Each dropdown (Brands, Flavors, Strength) supports multi-select and independent selection.\n- Custom icons and checkboxes are implemented with SVG for pixel-perfect accuracy.\n- Divider lines and spacing match the Figma design.\n- All UI/UX bugs (e.g., duplicate checkbox selection) have been fixed.\n\n---\n\n## Getting Started\n\nFirst, install the dependencies:\n\n```bash\nnpm install\n```\n\nThen, run the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n---\n\n## Learning \u0026 Customization\n\n- **Component Reuse**: The dropdown and filter bar are modular; add more filters by extending `CategoryFilterMenuBar`.\n- **Styling**: All styles use Tailwind CSS for rapid customization. Adjust colors, spacing, or icons as needed.\n- **Accessibility**: Keyboard navigation and focus states are supported. Review ARIA attributes for further improvements.\n- **Figma Matching**: To update the design, replace SVGs in `/public` or adjust Tailwind classes.\n\n---\n\n## License\n\nThis project is for demonstration and freelance use. You may adapt or extend it for your own projects.\n\n---\n\n\u003e Happy coding! If you have any questions or need help, feel free to reach out. Thank you. 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ffreelance-reusable-ui-components--nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Ffreelance-reusable-ui-components--nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Ffreelance-reusable-ui-components--nextjs/lists"}