အသုံးပြုပုံ
Variants၊ active state၊ tone props နှင့် layout flags များအတွက် cn ကို အသုံးပြုရပါသည်။
- cn ကို အမြဲ @quan-erp/shared-ui မှသာ import လုပ်ရပါသည်
- Template-literal ဖြင့် className ကို မပေါင်းစပ်ရပါ
- clsx၊ tailwind-merge သို့မဟုတ် cn ကို အခြား package မှ မယူရပါ
TSXcn
1import { cn } from "@quan-erp/shared-ui";
2
3<div
4 className={cn(
5 "inline-flex items-center rounded-full border border-border p-0.5",
6 tone === "on-dark" ? "border-white/15 bg-white/10" : "bg-muted",
7 )}
8/>
9
10<button
11 className={cn(
12 "flex h-8 w-8 items-center justify-center rounded-full transition",
13 active && "bg-background text-foreground",
14 !active && "text-muted-foreground hover:text-foreground",
15 )}
16/>မမှန်ကန်သော ပုံစံ
TSXincorrect
// Do not do this
className={`inline-flex border p-0.5 ${tone === "on-dark" ? "bg-white/10" : "bg-muted"}`}