jamsrui_utils_quickstart_cn_clsx_class_merging.ts

1import { cn, clsx, type ClassValue } from "@jamsrui/utils";
2
3// Example 1: Using cn (Tailwind-style class merging)
4const isActive = true;
5const className = cn(
6  "base-class",
7  isActive && "active-class",
8  "p-4 md:p-8",
9  { "custom-condition": false }
10);
11
12console.log(className); 
13// Output: "base-class active-class p-4 md:p-8"
14
15// Example 2: Using clsx for conditional class strings
16const buttonClasses = clsx('btn', {
17  'btn-primary': true,
18  'btn-large': false,
19});
20
21console.log(buttonClasses);
22// Output: "btn btn-primary"