mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-21 04:48:00 -05:00
8c268e23dd
* chore: replace prettier with biome and add linting * chore: update devcontainer settings to use biome for linting and remove eslint, prettier * chore: update docker-compose to use Postgres 17-alpine and standardize quotes * chore: fixed more BUT disabled most rules due to limit * added additional rules, fixed linting & ts errors * added additional rules * rebased & linted * fixed oauth * updated biome & minor modifications --------- Co-authored-by: Aditya Tripathi <aditya@climactic.co>
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import type * as React from 'react'
|
|
|
|
interface BlockInfoCardProps {
|
|
type: string
|
|
color: string
|
|
icon?: boolean
|
|
iconSvg?: string
|
|
}
|
|
|
|
export function BlockInfoCard({
|
|
type,
|
|
color,
|
|
icon = false,
|
|
iconSvg,
|
|
}: BlockInfoCardProps): React.ReactNode {
|
|
return (
|
|
<div className='mb-6 overflow-hidden rounded-lg border border-border'>
|
|
<div className='flex items-center justify-center p-6'>
|
|
<div
|
|
className='flex h-20 w-20 items-center justify-center rounded-lg'
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{iconSvg ? (
|
|
<div className='h-10 w-10 text-white' dangerouslySetInnerHTML={{ __html: iconSvg }} />
|
|
) : (
|
|
<div className='font-mono text-xl opacity-70'>{type.substring(0, 2)}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{icon && (
|
|
<style jsx global>{`
|
|
.block-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 1rem auto;
|
|
display: block;
|
|
}
|
|
`}</style>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|