Use WhyRating brand logo for tab and hub link icons

- Add WhyRating logo icon to Icons component
- Replace 'star' icon with 'whyrating' logo for tab and hub link

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-02 01:14:36 +00:00
parent 78d2becab9
commit 299e7beb57
2 changed files with 37 additions and 2 deletions

View File

@@ -8,7 +8,7 @@ import { categoryLabels, categoryOrder, bookmarkCategoryLabels, bookmarkCategory
type TabId = 'services' | 'bookmarks' | 'ai' | 'whyrating' | 'settings';
const tabs: { id: TabId; label: string; icon: string }[] = [
{ id: 'whyrating', label: 'WhyRating', icon: 'star' },
{ id: 'whyrating', label: 'WhyRating', icon: 'whyrating' },
{ id: 'services', label: 'Services', icon: 'server' },
{ id: 'ai', label: 'AI', icon: 'bot' },
{ id: 'bookmarks', label: 'Bookmarks', icon: 'external-link' },
@@ -28,7 +28,7 @@ const aiTools = [
];
const whyratingLinks = [
{ name: 'WhyRating Hub', url: 'http://whyrating.nuc.lan', icon: 'star', description: 'WhyRating project hub and quick links' },
{ name: 'WhyRating Hub', url: 'http://whyrating.nuc.lan', icon: 'whyrating', description: 'WhyRating project hub and quick links' },
];
export default function Home() {

View File

@@ -108,6 +108,41 @@ export const icons: Record<string, React.ComponentType<IconProps>> = {
'x': createIcon('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
'settings': createIcon('<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>'),
'loader': createIcon('<path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/>'),
// WhyRating brand logo icon
'whyrating': function WhyRatingIcon({ className = '', size = 24 }: IconProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 120 120"
className={className}
>
<polygon
points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
fill="#FBBC05"
stroke="#FBBC05"
strokeWidth="6"
strokeLinejoin="round"
/>
<g>
<circle cx="60" cy="62" r="27" fill="#1E293B"/>
<line x1="83" y1="81" x2="95" y2="91" stroke="#1E293B" strokeWidth="9" strokeLinecap="round"/>
<circle cx="60" cy="62" r="21" fill="#FEF3C7"/>
<rect x="68" y="44" width="11" height="18" rx="1.5" fill="#15803D"/>
<clipPath id="whyrating-lens">
<circle cx="60" cy="62" r="21"/>
</clipPath>
<g clipPath="url(#whyrating-lens)">
<rect x="42" y="58" width="11" height="35" rx="1.5" fill="#86EFAC"/>
<rect x="55" y="51" width="11" height="42" rx="1.5" fill="#22C55E"/>
<rect x="68" y="44" width="11" height="49" rx="1.5" fill="#15803D"/>
</g>
</g>
</svg>
);
},
};
export function Icon({ name, className, size }: { name: string; className?: string; size?: number }) {