mirror of
https://github.com/simstudioai/sim.git
synced 2026-10-24 23:06:59 +08:00
Waleed
8e7e2db35e
* feat(docs): update favicon, fix icon contrast, add integration intros - replace docs favicon/icon assets with new sim logo - fix light-tile icon contrast in BlockInfoCard so icons like Daytona no longer render invisible (white-on-white); matches sim toolbar's brightness-based contrast logic - add missing MANUAL-CONTENT-START:intro sections to 30 integration docs pages that lacked context/links * chore(docs): normalize spacing from generate-docs pass Ran the docs generator to verify our new intro sections survive regeneration cleanly. It reformats the blank line before "## Usage Instructions" to match every other manually-annotated page. * fix(context-dev): remove prefetch and simplified-brand tools - remove context_dev_prefetch_domain, context_dev_prefetch_by_email, and context_dev_get_brand_simplified tools and their block operation entries; these aren't meant for general use - regenerate docs to drop their sections from context_dev.mdx
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import type * as React from 'react'
|
|
import { blockTypeToIconMap } from '@/components/ui/icon-mapping'
|
|
|
|
interface BlockInfoCardProps {
|
|
type: string
|
|
color: string
|
|
icon?: React.ComponentType<{ className?: string }>
|
|
}
|
|
|
|
/**
|
|
* Brightness above which a tile background is "clearly light" and a white
|
|
* foreground icon would wash out. Mirrors apps/sim's LIGHT_TILE_THRESHOLD
|
|
* (blocks/icon-color.ts) so monochrome `currentColor` icons (e.g. Daytona,
|
|
* Notion) stay legible on white/pale tiles instead of white-on-white.
|
|
*/
|
|
const LIGHT_TILE_THRESHOLD = 0.75
|
|
|
|
function isLightTileColor(color: string): boolean {
|
|
const hex = color.trim().replace('#', '').toLowerCase()
|
|
let r: number
|
|
let g: number
|
|
let b: number
|
|
if (/^[0-9a-f]{3}$/.test(hex)) {
|
|
r = Number.parseInt(hex[0] + hex[0], 16)
|
|
g = Number.parseInt(hex[1] + hex[1], 16)
|
|
b = Number.parseInt(hex[2] + hex[2], 16)
|
|
} else if (/^[0-9a-f]{6}$/.test(hex)) {
|
|
r = Number.parseInt(hex.slice(0, 2), 16)
|
|
g = Number.parseInt(hex.slice(2, 4), 16)
|
|
b = Number.parseInt(hex.slice(4, 6), 16)
|
|
} else {
|
|
return false
|
|
}
|
|
return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > LIGHT_TILE_THRESHOLD
|
|
}
|
|
|
|
export function BlockInfoCard({
|
|
type,
|
|
color,
|
|
icon: IconComponent,
|
|
}: BlockInfoCardProps): React.ReactNode {
|
|
const ResolvedIcon = IconComponent || blockTypeToIconMap[type] || null
|
|
const iconColorClass = isLightTileColor(color) ? 'text-black' : 'text-white'
|
|
|
|
return (
|
|
<div
|
|
className='mb-6 flex items-center justify-center overflow-hidden rounded-lg p-8'
|
|
style={{ background: color }}
|
|
>
|
|
{ResolvedIcon ? (
|
|
<ResolvedIcon className={`size-10 ${iconColorClass}`} />
|
|
) : (
|
|
<div className={`font-mono text-xl opacity-70 ${iconColorClass}`}>
|
|
{type.substring(0, 2)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|