@rizom/ui 0.2.0-alpha.51 → 0.2.0-alpha.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Wordmark.tsx +28 -13
package/package.json
CHANGED
package/src/Wordmark.tsx
CHANGED
|
@@ -3,9 +3,13 @@ import { cn } from "./cn";
|
|
|
3
3
|
import type { RizomBrandSuffix } from "./types";
|
|
4
4
|
|
|
5
5
|
export interface WordmarkProps {
|
|
6
|
-
|
|
6
|
+
/** Brand name before the dot. Defaults to `"rizom"`. */
|
|
7
|
+
name?: string;
|
|
8
|
+
/** Suffix after the dot. Any string (e.g. `"ai"`, `"io"`, `"foundation"`). */
|
|
9
|
+
brandSuffix: RizomBrandSuffix | string;
|
|
7
10
|
className?: string;
|
|
8
11
|
dotClassName?: string;
|
|
12
|
+
suffixClassName?: string;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
const DOT_BY_SUFFIX: Record<RizomBrandSuffix, string> = {
|
|
@@ -15,18 +19,29 @@ const DOT_BY_SUFFIX: Record<RizomBrandSuffix, string> = {
|
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
export const Wordmark = ({
|
|
22
|
+
name = "rizom",
|
|
18
23
|
brandSuffix,
|
|
19
24
|
className,
|
|
20
25
|
dotClassName,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
)
|
|
26
|
+
suffixClassName,
|
|
27
|
+
}: WordmarkProps): JSX.Element => {
|
|
28
|
+
const knownDotClass = DOT_BY_SUFFIX[brandSuffix as RizomBrandSuffix];
|
|
29
|
+
return (
|
|
30
|
+
<span
|
|
31
|
+
className={cn(
|
|
32
|
+
"inline-flex items-baseline gap-0 font-display font-medium tracking-[-0.015em] [font-variation-settings:'opsz'_24]",
|
|
33
|
+
className,
|
|
34
|
+
)}
|
|
35
|
+
>
|
|
36
|
+
<span className="text-theme">{name}</span>
|
|
37
|
+
<span className={cn(knownDotClass ?? "text-accent", dotClassName)}>
|
|
38
|
+
.
|
|
39
|
+
</span>
|
|
40
|
+
<span
|
|
41
|
+
className={cn("italic font-normal text-theme-muted", suffixClassName)}
|
|
42
|
+
>
|
|
43
|
+
{brandSuffix}
|
|
44
|
+
</span>
|
|
45
|
+
</span>
|
|
46
|
+
);
|
|
47
|
+
};
|