| import s from './index.module.css' |
| import cn from '@/utils/classnames' |
| import type { DataSourceNotionPage } from '@/models/common' |
|
|
| type IconTypes = 'workspace' | 'page' |
| type NotionIconProps = { |
| type?: IconTypes |
| name?: string | null |
| className?: string |
| src?: string | null | DataSourceNotionPage['page_icon'] |
| } |
| const NotionIcon = ({ |
| type = 'workspace', |
| src, |
| name, |
| className, |
| }: NotionIconProps) => { |
| if (type === 'workspace') { |
| if (typeof src === 'string') { |
| if (src.startsWith('https://') || src.startsWith('http://')) { |
| return ( |
| <img |
| alt='workspace icon' |
| src={src} |
| className={cn('block object-cover w-5 h-5', className)} |
| /> |
| ) |
| } |
| return ( |
| <div className={cn('flex items-center justify-center w-5 h-5', className)}>{src}</div> |
| ) |
| } |
| return ( |
| <div className={cn('flex items-center justify-center w-5 h-5 bg-gray-200 text-xs font-medium text-gray-500 rounded', className)}>{name?.[0].toLocaleUpperCase()}</div> |
| ) |
| } |
|
|
| if (typeof src === 'object' && src !== null) { |
| if (src?.type === 'url') { |
| return ( |
| <img |
| alt='page icon' |
| src={src.url || ''} |
| className={cn('block object-cover w-5 h-5', className)} |
| /> |
| ) |
| } |
| return ( |
| <div className={cn('flex items-center justify-center w-5 h-5', className)}>{src?.emoji}</div> |
| ) |
| } |
|
|
| return ( |
| <div className={cn(s['default-page-icon'], className)} /> |
| ) |
| } |
|
|
| export default NotionIcon |
|
|
