매너온도를 작은 배지 형태로 표현하는 컴포넌트입니다.
import { VStack } from "@seed-design/lynx-react";
import { MannerTempBadge } from "@/components/ui/manner-temp-badge";
const temperatures = [12.5, 30, 36, 36.5, 37, 40, 45, 55, 65, 80];
export default function Example() {
return (
<VStack align="center" gap="x1">
{temperatures.map((temperature) => (
<MannerTempBadge key={temperature} temperature={temperature} />
))}
</VStack>
);
}npx @seed-design/cli@latest add ui:manner-temp-badgepnpm dlx @seed-design/cli@latest add ui:manner-temp-badgeyarn dlx @seed-design/cli@latest add ui:manner-temp-badgebun x @seed-design/cli@latest add ui:manner-temp-badgenpm install @seed-design/lynx-reactyarn add @seed-design/lynx-reactpnpm add @seed-design/lynx-reactbun add @seed-design/lynx-react/**
* @file ui:manner-temp-badge
* @requires @seed-design/lynx-react@^1.0.0
* @requires @seed-design/lynx-css@^1.0.0
**/
import * as React from "@lynx-js/react";
import {
MannerTempBadge as SeedMannerTempBadge,
type MannerTempBadgeProps as SeedMannerTempBadgeProps,
} from "@seed-design/lynx-react";
import { mannerTempToLevel } from "../lib/manner-temp-level";
export interface MannerTempBadgeProps extends Omit<SeedMannerTempBadgeProps, "children"> {
/**
* The manner temperature of the badge.
* Level will be calculated based on this value.
* If level is provided, this will be ignored.
*/
temperature: number;
}
/**
* @see https://seed-design.io/lynx/components/manner-temp-badge
*/
export const MannerTempBadge = React.forwardRef<unknown, MannerTempBadgeProps>(
({ temperature, level, ...otherProps }, ref) => {
return (
<SeedMannerTempBadge
ref={ref}
level={level ?? mannerTempToLevel(temperature)}
{...otherProps}
>
{`${temperature}°C`}
</SeedMannerTempBadge>
);
},
);
MannerTempBadge.displayName = "MannerTempBadge";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Prop
Type
temperature를 전달하면 구간에 맞는 level을 계산해 온도를 표시합니다. level을 직접 지정하면 계산 결과보다 우선합니다.
import { MannerTempBadge } from "@/components/ui/manner-temp-badge";
export function App() {
return <MannerTempBadge temperature={36.5} />;
}표시 문구를 바꾸려면 MannerTempBadge에 level과 문자열 또는 숫자 자식을 전달합니다.
import { MannerTempBadge } from "@seed-design/lynx-react";
export function App() {
return <MannerTempBadge level="l4">36.5°C</MannerTempBadge>;
}asChild는 지원하지 않습니다.Last updated on