114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
import type { LucideIcon, LucideProps } from 'lucide-react';
|
|
import {
|
|
ActivityIcon,
|
|
ExternalLinkIcon,
|
|
HelpCircleIcon,
|
|
MailIcon,
|
|
MonitorIcon,
|
|
MonitorPlayIcon,
|
|
PodcastIcon,
|
|
ScanIcon,
|
|
SearchIcon,
|
|
SmartphoneIcon,
|
|
TabletIcon,
|
|
} from 'lucide-react';
|
|
|
|
import { NOT_SET_VALUE } from '@mixan/constants';
|
|
|
|
interface SerieIconProps extends LucideProps {
|
|
name: string;
|
|
}
|
|
|
|
function getProxyImage(url: string) {
|
|
return `${String(process.env.NEXT_PUBLIC_API_URL)}/misc/favicon?url=${encodeURIComponent(url)}`;
|
|
}
|
|
|
|
const createImageIcon = (url: string) => {
|
|
return function (props: LucideProps) {
|
|
return <img className="w-4 h-4 object-cover rounded" src={url} />;
|
|
} as LucideIcon;
|
|
};
|
|
|
|
const mapper: Record<string, LucideIcon> = {
|
|
// Events
|
|
screen_view: MonitorPlayIcon,
|
|
session_start: ActivityIcon,
|
|
session_end: ActivityIcon,
|
|
link_out: ExternalLinkIcon,
|
|
|
|
// Websites
|
|
google: createImageIcon(getProxyImage('https://google.com')),
|
|
facebook: createImageIcon(getProxyImage('https://facebook.com')),
|
|
bing: createImageIcon(getProxyImage('https://bing.com')),
|
|
twitter: createImageIcon(getProxyImage('https://x.com')),
|
|
duckduckgo: createImageIcon(getProxyImage('https://duckduckgo.com')),
|
|
'yahoo!': createImageIcon(getProxyImage('https://yahoo.com')),
|
|
instagram: createImageIcon(getProxyImage('https://instagram.com')),
|
|
gmail: createImageIcon(getProxyImage('https://mail.google.com/')),
|
|
|
|
'mobile safari': createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg'
|
|
)
|
|
),
|
|
chrome: createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg'
|
|
)
|
|
),
|
|
'samsung internet': createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Samsung_Internet_logo.svg/1024px-Samsung_Internet_logo.svg.png'
|
|
)
|
|
),
|
|
safari: createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg'
|
|
)
|
|
),
|
|
edge: createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/7/7e/Microsoft_Edge_logo_%282019%29.png'
|
|
)
|
|
),
|
|
firefox: createImageIcon(
|
|
getProxyImage(
|
|
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/1920px-Firefox_logo%2C_2019.svg.png'
|
|
)
|
|
),
|
|
snapchat: createImageIcon(getProxyImage('https://snapchat.com')),
|
|
|
|
// Misc
|
|
mobile: SmartphoneIcon,
|
|
desktop: MonitorIcon,
|
|
tablet: TabletIcon,
|
|
search: SearchIcon,
|
|
social: PodcastIcon,
|
|
email: MailIcon,
|
|
unknown: HelpCircleIcon,
|
|
[NOT_SET_VALUE]: ScanIcon,
|
|
};
|
|
|
|
export function SerieIcon({ name, ...props }: SerieIconProps) {
|
|
const Icon = useMemo(() => {
|
|
const mapped = mapper[name.toLowerCase()] ?? null;
|
|
|
|
if (mapped) {
|
|
return mapped;
|
|
}
|
|
|
|
if (name.includes('http')) {
|
|
return createImageIcon(getProxyImage(name));
|
|
}
|
|
|
|
return null;
|
|
}, [name]);
|
|
|
|
return Icon ? (
|
|
<div className="w-4 h-4 flex-shrink-0 relative [&_a]:!w-4 [&_a]:!h-4 [&_svg]:!rounded">
|
|
<Icon size={16} {...props} />
|
|
</div>
|
|
) : null;
|
|
}
|