Tabs

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="2" triggerLayout="fill">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1" triggerLayout="hug">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1" size="medium">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1" size="small">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="2">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable className="tabs-preview__carousel">
            <TabsContent className="tabs-preview__content" value="1">
              <text className="tabs-preview__content-text">Content 1</text>
            </TabsContent>
            <TabsContent className="tabs-preview__content" value="2">
              <text className="tabs-preview__content-text">Content 2</text>
            </TabsContent>
            <TabsContent className="tabs-preview__content" value="3">
              <text className="tabs-preview__content-text">Content 3</text>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" disabled>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" notification>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <scroll-view className="tabs-preview__scroll" scroll-orientation="vertical">
        <TabsRoot defaultValue="1" size="medium" stickyList>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent className="tabs-preview__sticky-content" value="1">
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent className="tabs-preview__sticky-content" value="2">
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent className="tabs-preview__sticky-content" value="3">
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
      </scroll-view>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  function handleValueChange(value: string) {
    "background only";
    setActiveTab(value);
  }

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot defaultValue="1" onValueChange={handleValueChange}>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          {activeTab === "1" && (
            <view className="tabs-preview__content">
              <text className="tabs-preview__content-text">Content 1</text>
            </view>
          )}
          {activeTab === "2" && (
            <view className="tabs-preview__content">
              <text className="tabs-preview__content-text">Content 2</text>
            </view>
          )}
          {activeTab === "3" && (
            <view className="tabs-preview__content">
              <text className="tabs-preview__content-text">Content 3</text>
            </view>
          )}
        </TabsRoot>
      </view>
    </view>
  );
}

import "./styles";

import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

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

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview tabs-preview--dynamic-height">
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent
            className="tabs-preview__dynamic-content"
            value="1"
            style={{ height: "100px" }}
          >
            <text className="tabs-preview__content-text">Content 1</text>
          </TabsContent>
          <TabsContent
            className="tabs-preview__dynamic-content"
            value="2"
            style={{ height: "200px" }}
          >
            <text className="tabs-preview__content-text">Content 2</text>
          </TabsContent>
          <TabsContent
            className="tabs-preview__dynamic-content"
            value="3"
            style={{ height: "300px" }}
          >
            <text className="tabs-preview__content-text">Content 3</text>
          </TabsContent>
        </TabsRoot>
        <view className="tabs-preview__dynamic-footer">
          <text className="tabs-preview__content-text">아래 콘텐츠</text>
        </view>
      </view>
    </view>
  );
}

import "./styles";

import { useCallback, useRef, useState } from "@lynx-js/react";
import type { NodesRef } from "@lynx-js/types";
import { useSeedClassName } from "@seed-design/lynx-react";
import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";

const SCROLL_ITEMS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function scrollToTop(ref: NodesRef | null) {
  "background only";

  ref?.invoke({ method: "scrollTo", params: { offset: 0, smooth: true } }).exec();
}

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [currentTab, setCurrentTab] = useState("1");
  const firstContentRef = useRef<NodesRef | null>(null);
  const secondContentRef = useRef<NodesRef | null>(null);

  const setFirstContentRef = useCallback((node: NodesRef | null) => {
    "background only";
    firstContentRef.current = node;
  }, []);
  const setSecondContentRef = useCallback((node: NodesRef | null) => {
    "background only";
    secondContentRef.current = node;
  }, []);

  function handleFirstTriggerTap() {
    "background only";
    if (currentTab === "1") scrollToTop(firstContentRef.current);
  }

  function handleSecondTriggerTap() {
    "background only";
    if (currentTab === "2") scrollToTop(secondContentRef.current);
  }

  return (
    <view className={`${seedClassName} docs-lynx-tabs-root`}>
      <view className="tabs-preview">
        <TabsRoot triggerLayout="fill" value={currentTab} onValueChange={setCurrentTab}>
          <TabsList>
            <TabsTrigger value="1" bindtap={handleFirstTriggerTap}>
              라벨1
            </TabsTrigger>
            <TabsTrigger value="2" bindtap={handleSecondTriggerTap}>
              라벨2
            </TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable className="tabs-preview__scroll-top-carousel">
            <TabsContent value="1">
              <scroll-view
                ref={setFirstContentRef}
                scroll-orientation="vertical"
                initial-scroll-offset={300}
                className="tabs-preview__scroll-top"
              >
                <view className="tabs-preview__scroll-top-content">
                  {SCROLL_ITEMS.map((item) => (
                    <view key={item} className="tabs-preview__scroll-top-item">
                      <text className="tabs-preview__content-text">Content 1 · {item}</text>
                    </view>
                  ))}
                </view>
              </scroll-view>
            </TabsContent>
            <TabsContent value="2">
              <scroll-view
                ref={setSecondContentRef}
                scroll-orientation="vertical"
                initial-scroll-offset={300}
                className="tabs-preview__scroll-top"
              >
                <view className="tabs-preview__scroll-top-content">
                  {SCROLL_ITEMS.map((item) => (
                    <view key={item} className="tabs-preview__scroll-top-item">
                      <text className="tabs-preview__content-text">Content 2 · {item}</text>
                    </view>
                  ))}
                </view>
              </scroll-view>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </view>
    </view>
  );
}