{appTitle}

\n \n {/* Right side content */}\n

\n {rightContent}\n

\n );\n}\n\n/**\n * CharBuildBranding component for displaying char.build brand with vertical divider\n */\nexport function CharBuildBranding({ className = \"\", ...props }) {\n const containerStyle = {\n display: \"flex\",\n alignItems: \"center\",\n };\n \n const charStyle = {\n fontFamily: \"'Lobster', cursive\",\n fontSize: \"1rem\",\n background: \"linear-gradient(135deg, #4e44ce, #0066cc)\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n };\n \n const buildStyle = {\n fontFamily: \"'Space Mono', monospace\",\n fontSize: \"0.85rem\",\n fontWeight: \"bold\",\n color: \"#333\",\n };\n \n const dividerStyle = {\n height: \"1.5rem\",\n width: \"1px\",\n backgroundColor: \"#e2e8f0\",\n margin: \"0 0.5rem\",\n };\n\n return (\n

\n \n char\n .build\n \n

\n );\n}\n\n/**\n * UserAvatar component for displaying user profile picture or initials\n */\nexport function UserAvatar({ \n user = { initials: \"U\", email: \"\", image: \"\" },\n size = \"medium\",\n className = \"\",\n ...props\n}) {\n const sizeMap = {\n small: { width: \"24px\", height: \"24px\", fontSize: \"0.75rem\" },\n medium: { width: \"32px\", height: \"32px\", fontSize: \"0.875rem\" },\n large: { width: \"40px\", height: \"40px\", fontSize: \"1rem\" },\n };\n \n const dimensions = sizeMap[size] || sizeMap.medium;\n \n const containerStyle = {\n width: dimensions.width,\n height: dimensions.height,\n borderRadius: \"50%\",\n backgroundColor: \"#e5e7eb\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#4b5563\",\n fontWeight: 500,\n fontSize: dimensions.fontSize,\n overflow: \"hidden\",\n };\n\n return (\n

\n {user.image ? (\n {user.email

\n ) : (\n {user.initials}\n )}\n

\n );\n}\n\n/**\n * CountBadge component for displaying a count with an icon\n */\nexport function CountBadge({\n count,\n icon,\n className = \"\",\n ...props\n}) {\n const containerStyle = {\n backgroundColor: \"#f0f0f0\",\n padding: \"0.35rem 0.6rem\",\n borderRadius: \"1rem\",\n fontSize: \"0.875rem\",\n fontWeight: 500,\n display: \"flex\",\n alignItems: \"center\",\n };\n \n const iconStyle = {\n marginRight: \"0.25rem\",\n };\n\n return (\n

\n {icon && {icon}}\n {count}\n

\n );\n}\n\nexport default CompactHeader;","deleted","label",[168,169,152],"shared","components","permalink","https://www.val.town/x/dcm31/charBuildSuperapp/code/shared/components/CompactHeader.tsx","extension","tsx","actionData","errors"]