portfolio/app/data/sections.ts

export const sections = [
  {
    name: "Elements" as const,
    icon: "i-heroicons-square-3-stack-3d",
    components: [
      {
        name: "Accordion" as const,
        aliases: ["Collapse", "Disclosure", "Expansion Panel"],
        help: "Vertically collapsing accordion panels",
      },
      {
        name: "Alert" as const,
        help: "Contextual information to be emphasized to the user",
      },
      { name: "Avatar" as const, help: "Rounded image of a resource" },
      {
        name: "Badge" as const,
        aliases: ["Chip", "Tag"],
        help: "Short text indicator to represent a status",
      },
      {
        name: "Button" as const,
        help: "Interactive element that users can click or tap to perform an action",
      },
      {
        name: "Select Button" as const,
        help: "A button (or button group) used for selection.",
      },
      {
        name: "Toggle Button" as const,
        help: "A button used to select a boolean value.",
      },
      {
        name: "Breadcrumb" as const,
        help: "Indicate the current page's location within a navigational hierarchy",
      },
      {
        name: "Carousel" as const,
        aliases: ["Slideshow", "Galleria"],
        help: "A slideshow component for cycling through elements, typically images or slides of text",
      },
      {
        name: "Chat Bubble" as const,
        help: "Show one line of conversation and its data, like author image, name, time.",
      },
      {
        name: "Divider" as const,
        aliases: ["Separator"],
        help: "Visual element which separates content vertically or horizontally.",
      },
      {
        name: "Dropdown" as const,
        aliases: ["Select Menu"],
        help: "Toggle contextual overlays for displaying lists of actions or items to select.",
      },
      {
        name: "Listbox" as const,
        help: "Select one or more values from a displayed list of items.",
      },
      {
        name: "Indicator" as const,
        help: "Used to place an element on the corner of another element",
      },
      {
        name: "Mockup" as const,
        help: "A fake box (browser, code, phone, window) around the content",
      },
      { name: "Panel Splitter" as const, help: "Used to separate and resize panels" },
      {
        name: "QR Code" as const,
        help: "A component that generates a QR code based on the provided data.",
      },
      {
        name: "Keyboard Key" as const,
        help: "A keyboard key in a text block, typically to display a shortcut to a user",
      },
      {
        name: "Scroll Bar" as const,
        aliases: ["Scroll Area"],
        help: "A customizable and cross browser alternative to native browser scrollbar",
      },
      {
        name: "Speed Dial" as const,
        aliases: ["Floating Action Button"],
        help: "When pressed, this floating action button, displays multiple other action buttons. It is used to quickly access features.",
      },
      {
        name: "Stack" as const,
        help: "Stack visually puts elements on top of each other",
      },
      {
        name: "Timeline" as const,
        help: "A visual representation used to display a sequence of events or processes in chronological order.",
      },
    ],
  },
  {
    name: "Inputs" as const,
    icon: "i-heroicons-pencil-square",
    components: [
      {
        name: "Auto Complete" as const,
        help: "An input component that provides real-time suggestions when being typed",
      },
      {
        name: "Color Picker" as const,
        help: "An input component to select a color",
      },
      {
        name: "Input Chips" as const,
        help: "Used to enter multiple values on a single input fields",
      },
      {
        name: "OTP Input" as const,
        help: "Used for MFA procedure of authenticating users by a one-time password",
      },
      {
        name: "Date Picker" as const,
        aliases: ["Calendar"],
        help: "A popover to select a date or a time from a calendar-like interface",
      },
      {
        name: "Rich Text Editor" as const,
        help: "A component that allows users to format and style text, offering various options like bold, italics, lists, and more, without needing to write HTML or other markup code",
      },
      { name: "Input" as const, help: "An input field" },
      {
        name: "Input Mask" as const,
        help: "Automatically formats inputs like date, currency, email and phone",
      },
      {
        name: "Knob" as const,
        help: "An input element to adjust a value by turning or dragging the control, similar to a physical knob on an electronic device. It's often used to control volume, brightness, or other continuous values",
      },
      {
        name: "Password Indicator" as const,
        help: "Helper to provide information on password field like strength, while entering it",
      },
      { name: "Textarea" as const, help: "A textarea field" },
      { name: "Select" as const, help: "A select field" },
      {
        name: "Swap" as const,
        help: "Allows to toggle the visibility of two elements",
      },
      {
        name: "Signature Pad" as const,
        help: "A component that allows users to draw a signature using a signature pad.",
      },
      { name: "Checkbox" as const, help: "A checkbox field" },
      { name: "Radio" as const, help: "A radio field" },
      {
        name: "Toggle" as const,
        aliases: ["Switch", "Input Switch"],
        help: "A toggle field",
      },
      { name: "Range" as const, aliases: ["Slider"], help: "A range field" },
      {
        name: "Rating" as const,
        help: "A set of radio buttons that allow the user to rate something",
      },
      {
        name: "File Input" as const,
        aliases: ["File Upload"],
        help: "An input field for uploading files",
      },
    ],
  },
  {
    name: "Navigation" as const,
    icon: "i-heroicons-link-solid",
    components: [
      {
        name: "Bottom Tabs" as const,
        help: "Bottom navigation that allows navigation between primary screens, usually used on mobile",
      },
      {
        name: "Command Palette" as const,
        help: "A powerful user interface element that allows users to access various commands, functions, or actions from a single input panel",
      },
      { name: "Dock" as const, help: "A macOS-like Dock to navigate, using icons" },
      {
        name: "Pagination" as const,
        aliases: ["Paginator"],
        help: "Navigation system for large amount of data that need to be displayed one at a time",
      },
      {
        name: "Progress" as const,
        aliases: ["Progress Bar", "Progress Indicator"],
        help: "A graphical element used to visualize the progression of a particular process, such as a file download, a setup process, or any task that might take some time to complete",
      },
      {
        name: "Scroll Spy" as const,
        aliases: ["Anchor"],
        help: "A navigation mechanism that automatically highlights the navigation links based on the scroll position to indicate which section of the page is currently in the viewport. It's a common feature in single-page websites or long pages with distinct sections",
      },
      {
        name: "Scroll Top" as const,
        aliases: ["Back Top"],
        help: "Display an item after a certain scroll position. It's usually used to navigates to the top of the page",
      },
      {
        name: "Steps" as const,
        help: "Used to show a list of steps in a process",
      },
      {
        name: "Tabs" as const,
        help: "A set of tab panels that are displayed one at a time",
      },
      {
        name: "Vertical Navigation" as const,
        help: "Navigation menu with items vertically stacked",
      },
    ],
  },
  {
    name: "Overlays" as const,
    icon: "i-heroicons-square-2-stack",
    components: [
      {
        name: "Modal" as const,
        aliases: ["Dialog"],
        help: "Dialog box or popup window that is displayed on top of the current page.",
      },
      {
        name: "Slideover" as const,
        aliases: ["Slide-out panel", "Sliding Overlay", "Offcanvas", "Drawer", "Sheet"],
        help: "Extra content or navigation options to slide over the main content of a page, from one side of the screen",
      },
      {
        name: "Popover" as const,
        help: "A transient view that appears above other content onscreen when a user clicks or taps on a control or within a defined area",
      },
      {
        name: "Tooltip" as const,
        help: "A brief, informative message that appears when a user hovers over an element",
      },
      {
        name: "Context Menu" as const,
        help: "A dedicated menu that appears on right click",
      },
      {
        name: "Toast" as const,
        aliases: ["Notification", "Snack Bar"],
        help: "A small, non-modal notification that provides feedback to a user, typically appearing for a short duration and then disappearing automatically",
      },
      {
        name: "Tour" as const,
        help: "Used to display a contextual help on features to new users",
      },
      {
        name: "Watermark" as const,
        help: "Add specific text or patterns to the page. It can be used to identify copyright or prevent information theft.",
      },
    ],
  },
  {
    name: "Layout" as const,
    icon: "i-ph-layout",
    components: [
      { name: "Card" as const, help: "Content with a header, body and footer" },
      { name: "Container" as const, help: "Let constrain the user's content" },
      {
        name: "Skeleton" as const,
        aliases: ["Placeholder"],
        help: "A placeholder typically used while content is loading",
      },
    ],
  },
  {
    name: "Data" as const,
    icon: "i-heroicons-table-cells",
    components: [
      {
        name: "Table" as const,
        help: "Data displayed in a tabular format",
      },
      {
        name: "Calendar" as const,
        help: "Data displayed in a calendar format (weekly or monthly view)",
      },
      {
        name: "Order List" as const,
        help: "A component to display a list of items with actions to sort those items",
      },
      {
        name: "Tree" as const,
        aliases: ["Organization Chart"],
        help: "A component to visualize and interact with hierarchical data",
      },
      {
        name: "Pick List" as const,
        aliases: ["Transfer"],
        help: "A component for moving items between different lists and ordering them",
      },
      {
        name: "Virtual Scroller" as const,
        help: "A performant approach to render large amounts of data efficiently",
      },
    ],
  },
]