Integrations beside a product
- Agenda
- Salud Total
- Custom server (no logo yet)
- Nueva EPS (its initials)
import { PlugsConnectedIcon } from '@phosphor-icons/react';
import { LogoTile, ProductMark } from '@arbol-ai/ui';
const LOGO =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%232563eb'/%3E%3Cpath d='M10 17l4 4 8-9' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E";
<ul className="space-y-3 text-sm">
<li className="flex items-center gap-2.5">
<ProductMark product="agenda" />
Agenda
</li>
<li className="flex items-center gap-2.5">
<LogoTile name="Salud Total" src={['data:image/png;base64,AAAA', LOGO]} />
Salud Total
</li>
<li className="flex items-center gap-2.5">
<LogoTile icon={<PlugsConnectedIcon weight="duotone" />} name="Custom server" />
Custom server (no logo yet)
</li>
<li className="flex items-center gap-2.5">
<LogoTile name="Nueva EPS" />
Nueva EPS (its initials)
</li>
</ul>The current logo in a settings row
With alt, the tile is an image that screen readers name.
PNG, SVG or JPG, ideally square.import { BuildingsIcon } from '@phosphor-icons/react';
import { LogoTile } from '@arbol-ai/ui';
const LOGO =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='11' fill='%232563eb'/%3E%3Cpath d='M10 17l4 4 8-9' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E";
<div className="flex items-center gap-3">
<LogoTile alt="Current logo" icon={<BuildingsIcon />} name="Clínica Norte" size="xl" src={LOGO} />
<span className="text-muted-foreground text-sm">PNG, SVG or JPG, ideally square.</span>
</div>Source
The examples above are src/blocks/logo-tile/logo-tile.examples.tsx, which the library’s tests render too.