Chip Tabs

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralSolid"
        size="medium"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { ActionButton, Box, HStack, Text, useSeedClassName, VStack } from "@seed-design/lynx-react";
import {
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
  type ChipTabsListProps,
} from "@/components/ui/chip-tabs";

type ScrollAlign = NonNullable<ChipTabsListProps["scrollAlign"]>;

const ALIGNMENTS: ScrollAlign[] = ["nearest", "start", "center", "end"];
const LABELS = Array.from({ length: 15 }, (_, index) => String(index + 1));

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");
  const [scrollAlign, setScrollAlign] = useState<ScrollAlign>("nearest");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  function selectScrollAlign(nextScrollAlign: ScrollAlign) {
    "background only";
    setScrollAlign(nextScrollAlign);
    setValue("1");
  }

  function selectSixthChip() {
    "background only";
    setValue("6");
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root chip-tabs-scroll-alignment`}>
      <VStack gap="x3">
        <HStack className="chip-tabs-scroll-alignment__controls" wrap="wrap" gap="x2" p="x4">
          {ALIGNMENTS.map((nextScrollAlign) => (
            <ActionButton
              key={nextScrollAlign}
              className={`chip-tabs-scroll-alignment__mode-button chip-tabs-scroll-alignment__mode-button--${nextScrollAlign}`}
              variant={scrollAlign === nextScrollAlign ? "neutralSolid" : "neutralOutline"}
              bindtap={() => {
                "background only";
                selectScrollAlign(nextScrollAlign);
              }}
            >
              {nextScrollAlign}
            </ActionButton>
          ))}
          <ActionButton
            className="chip-tabs-scroll-alignment__select-sixth-button"
            variant="neutralOutline"
            bindtap={selectSixthChip}
          >
            6번 선택
          </ActionButton>
        </HStack>

        <Box px="x4">
          <Text className="chip-tabs-scroll-alignment__selected-value" textStyle="t5Regular">
            {`선택: 라벨${value}`}
          </Text>
        </Box>

        <Box className="chip-tabs-scroll-alignment__list-frame" width="360px" maxWidth="100%">
          <ChipTabsRoot value={value} onValueChange={handleValueChange}>
            <ChipTabsList scrollAlign={scrollAlign === "nearest" ? undefined : scrollAlign}>
              {LABELS.map((label) => (
                <ChipTabsTrigger key={label} value={label}>
                  {`라벨${label}`}
                </ChipTabsTrigger>
              ))}
            </ChipTabsList>
          </ChipTabsRoot>
        </Box>
      </VStack>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralSolid"
        size="medium"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralSolid"
        size="large"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralSolid"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralOutline"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [value, setValue] = useState("1");

  function handleValueChange(nextValue: string) {
    "background only";
    setValue(nextValue);
  }

  return (
    <view className={`${seedClassName} docs-lynx-chip-tabs-root`}>
      <ChipTabsRoot
        variant="neutralOutline"
        size="medium"
        defaultValue="1"
        value={value}
        onValueChange={handleValueChange}
      >
        <ChipTabsList>
          <ChipTabsTrigger notification value="1">
            라벨1
          </ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
      </ChipTabsRoot>
      {value === "1" && <text className="chip-tabs-preview__content-text">content 1</text>}
      {value === "2" && <text className="chip-tabs-preview__content-text">content 2</text>}
      {value === "3" && <text className="chip-tabs-preview__content-text">content 3</text>}
    </view>
  );
}

import "./styles";

import { ScrollFog, useSeedClassName } from "@seed-design/lynx-react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "@/components/ui/chip-tabs";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={seedClassName} style={{ maxWidth: "360px" }}>
      <ChipTabsRoot defaultValue="1">
        <ScrollFog style={{ width: "100%", height: "36px" }} placement={["left", "right"]}>
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
            <ChipTabsTrigger value="4">라벨4</ChipTabsTrigger>
            <ChipTabsTrigger value="5">라벨5</ChipTabsTrigger>
            <ChipTabsTrigger value="6">라벨6</ChipTabsTrigger>
            <ChipTabsTrigger value="7">라벨7</ChipTabsTrigger>
            <ChipTabsTrigger value="8">라벨8</ChipTabsTrigger>
            <ChipTabsTrigger value="9">라벨9</ChipTabsTrigger>
            <ChipTabsTrigger value="10">라벨10</ChipTabsTrigger>
            <ChipTabsTrigger value="11">라벨11</ChipTabsTrigger>
            <ChipTabsTrigger value="12">라벨12</ChipTabsTrigger>
            <ChipTabsTrigger value="13">라벨13</ChipTabsTrigger>
            <ChipTabsTrigger value="14">라벨14</ChipTabsTrigger>
            <ChipTabsTrigger value="15">라벨15</ChipTabsTrigger>
          </ChipTabsList>
        </ScrollFog>
      </ChipTabsRoot>
    </view>
  );
}