1- import type { FC } from "react" ;
21// Due to some weird issue with the import order, the import of useFontFaceObserver
32// should be after the imported here rather than some below helper functions as it is in the original file
43
@@ -10,46 +9,34 @@ import { getEmojiSize, stringToEmoji } from "./helper";
109import { LUCIDE_ICONS_LIST } from "./lucide-icons" ;
1110
1211type Props = {
13- logo : TLogoProps ;
12+ logo ? : TLogoProps ;
1413 size ?: number ;
1514 type ?: "lucide" | "material" ;
1615} ;
1716
18- export function Logo ( props : Props ) {
19- const { logo, size = 16 , type = "material" } = props ;
20-
21- // destructuring the logo object
22- const { in_use, emoji, icon } = logo ;
23-
24- // derived values
25- const value = in_use === "emoji" ? emoji ?. value : icon ?. name ;
26- const color = icon ?. color ;
27- const lucideIcon = LUCIDE_ICONS_LIST . find ( ( item ) => item . name === value ) ;
28-
17+ export function Logo ( { logo, size = 16 , type = "material" } : Props ) {
2918 const isMaterialSymbolsFontLoaded = useFontFaceObserver ( [
3019 {
31- family : ` Material Symbols Rounded` ,
32- style : ` normal` ,
33- weight : ` normal` ,
34- stretch : ` condensed` ,
20+ family : " Material Symbols Rounded" ,
21+ style : " normal" ,
22+ weight : " normal" ,
23+ stretch : " condensed" ,
3524 } ,
3625 ] ) ;
37- // if no value, return empty fragment
38- if ( ! value ) return < > </ > ;
3926
40- if ( ! isMaterialSymbolsFontLoaded && type === "material" ) {
41- return (
42- < span
43- style = { {
44- height : size ,
45- width : size ,
46- } }
47- className = "rounded-sm animate-pulse bg-layer-1"
48- />
49- ) ;
50- }
27+ // Reusable loading skeleton
28+ const loadingSkeleton = < span style = { { height : size , width : size } } className = "rounded-sm bg-layer-1" /> ;
5129
52- // emoji
30+ // Early returns for loading/empty states
31+ if ( ! logo || ! logo . in_use ) return loadingSkeleton ;
32+
33+ const { in_use, emoji, icon } = logo ;
34+ const value = in_use === "emoji" ? emoji ?. value : icon ?. name ;
35+
36+ if ( ! value ) return loadingSkeleton ;
37+ if ( ! isMaterialSymbolsFontLoaded && type === "material" ) return loadingSkeleton ;
38+
39+ // Emoji rendering
5340 if ( in_use === "emoji" ) {
5441 return (
5542 < span
@@ -66,38 +53,33 @@ export function Logo(props: Props) {
6653 ) ;
6754 }
6855
69- // icon
56+ // Icon rendering
7057 if ( in_use === "icon" ) {
58+ const color = icon ?. color ;
59+
60+ // Lucide icon
61+ if ( type === "lucide" ) {
62+ const lucideIcon = LUCIDE_ICONS_LIST . find ( ( item ) => item . name === value ) ;
63+ if ( ! lucideIcon ) return null ;
64+
65+ const LucideIconElement = lucideIcon . element ;
66+ return < LucideIconElement style = { { color, height : size , width : size } } /> ;
67+ }
68+
69+ // Material icon
7170 return (
72- < >
73- { type === "lucide" ? (
74- < >
75- { lucideIcon && (
76- < lucideIcon . element
77- style = { {
78- color : color ,
79- height : size ,
80- width : size ,
81- } }
82- />
83- ) }
84- </ >
85- ) : (
86- < span
87- className = "material-symbols-rounded"
88- style = { {
89- fontSize : size ,
90- color : color ,
91- scale : "115%" ,
92- } }
93- >
94- { value }
95- </ span >
96- ) }
97- </ >
71+ < span
72+ className = "material-symbols-rounded"
73+ style = { {
74+ fontSize : size ,
75+ color,
76+ scale : "115%" ,
77+ } }
78+ >
79+ { value }
80+ </ span >
9881 ) ;
9982 }
10083
101- // if no value, return empty fragment
102- return < > </ > ;
84+ return null ;
10385}
0 commit comments