Segmented Button (deprecated)

"use client";

import {IconAdd, IconPlane, SegmentedButton} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SegmentedButtonExample = () => {
  const [selectedButton, setSelectedButton] = useState(1);
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
      <SegmentedButton
        size={"regular"}
        value={selectedButton}
        segments={[
          {
            label: "Value 1",
            primaryIcon: <IconAdd></IconAdd>,
            value: 1,
          },
          {label: "Value 2", primaryIcon: <IconAdd></IconAdd>, value: 2},
          {primaryIcon: <IconPlane></IconPlane>, value: 3},
        ]}
        onChange={setSelectedButton}></SegmentedButton>
      Selected Value: {selectedButton}
    </div>
  );
};

"use client";

import {
  IconAdd,
  IconPlane,
  IconArrowRight,
  IconSubtract,
  IconDeleteBin5,
  SegmentedButton,
  Select,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

type ButtonStyle = "primary" | "critical" | "success" | "warn" | "neutral" | "currentColor";
type ButtonSize = "extraSmall" | "small" | "regular" | "large";

export const SegmentedButtonStylesExample = () => {
  const [selectedButton, setSelectedButton] = useState(0);
  const [style, setStyle] = useState<ButtonStyle>("neutral");
  const [size, setSize] = useState<ButtonSize>("regular");
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
      <div style={{display: "flex", flexDirection: "row", gap: "10px"}}>
        Style
        <Select
          placeholder={"neutral"}
          value={style}
          values={["primary", "critical", "success", "warn", "neutral"]}
          onChange={v => setStyle(v as ButtonStyle)}></Select>
      </div>
      <div style={{display: "flex", flexDirection: "row", gap: "10px"}}>
        Size
        <Select
          placeholder={"regular"}
          value={size}
          values={["extraSmall", "small", "regular", "large"]}
          onChange={v => setSize(v as ButtonSize)}></Select>
      </div>
      <div style={{display: "flex", flexDirection: "column", gap: "10px"}}>
        <SegmentedButton
          size={size}
          color={style}
          value={selectedButton}
          segments={[
            {
              label: "Button 0",
              primaryIcon: <IconAdd></IconAdd>,
              value: 0,
            },
            {label: "Button 1", secondaryIcon: <IconDeleteBin5></IconDeleteBin5>, value: 1},
            {primaryIcon: <IconPlane></IconPlane>, value: 2},
            {label: "Button 3", value: 3},
            {
              label: "Button 4",
              primaryIcon: <IconArrowRight></IconArrowRight>,
              secondaryIcon: <IconSubtract></IconSubtract>,
              value: 4,
            },
          ]}
          onChange={val => setSelectedButton(val as number)}></SegmentedButton>
        Selected Value: {selectedButton}
      </div>
    </div>
  );
};