Fusion UI

Overview

Tabs switch between views of the same context without leaving the page. A tab has a label and an optional icon; the content is connected via the active index. This example animates the content with SliderSection and SliderContent. The tab bar scrolls horizontally when there is not enough space and keeps the active tab in view.

Homepage

"use client";

import {
  IconBookmark,
  IconCalendar,
  IconLogoutBoxR,
  Input,
  Tab,
  Tabs,
  SliderContent,
  SliderSection,
  ExpansionPanel,
  Button,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

const tabsExample: Tab[] = [
  {label: "Homepage"},
  {label: "Bookmarks", icon: <IconBookmark></IconBookmark>},
  {label: "Calendar", icon: <IconCalendar></IconCalendar>},
  {label: "Logout", icon: <IconLogoutBoxR></IconLogoutBoxR>},
];

export const TabsExample = () => {
  const [activeTabExample, setActiveTabExample] = useState(0);
  const [expansionPanelExpanded, setExpansionPanelExpanded] = useState(false);

  return (
    <div style={{gap: "1rem", display: "flex", flexDirection: "column"}}>
      <Tabs
        tabs={tabsExample}
        tabStyle={"rounded"}
        activeIndex={activeTabExample}
        onChange={setActiveTabExample}
      />
      <SliderSection activeIndex={activeTabExample}>
        <SliderContent>Homepage</SliderContent>
        <SliderContent>
          <Input value={"TEST"} onChange={() => {}}></Input>
        </SliderContent>
        <SliderContent>
          <div style={{height: "300px", backgroundColor: "red"}}></div>
        </SliderContent>
        <SliderContent>
          <Button onClick={() => setExpansionPanelExpanded(curr => !curr)}>Logout</Button>
          <ExpansionPanel expanded={expansionPanelExpanded}>
            <div style={{height: "300px", backgroundColor: "green"}}>Logged out!</div>
          </ExpansionPanel>
        </SliderContent>
      </SliderSection>
    </div>
  );
};

Playground

rounded underlines the active tab and fits into page headers, standalone fills it and works on its own within content.

[
  {
    "label": "First"
  },
  {
    "label": "Second"
  },
  {
    "label": "Third"
  }
]

[
  {
    "label": "First"
  },
  {
    "label": "Second"
  },
  {
    "label": "Third"
  }
]

showDividerLine

import { Tabs } from "@brynlabs/fusion-ui"

<Tabs
  tabs={[
  {
    "label": "First"
  },
  {
    "label": "Second"
  },
  {
    "label": "Third"
  }
]}
  tabStyle={"rounded"}
  showDividerLine={false}>
</Tabs>