github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-07 22:24:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

Created icons instead of svgs for the blocks

Browse Source
This commit is contained in:
Emir Karabeg
2025-01-07 18:42:24 -08:00
parent ec1d8e0067
commit 27fdf4a2d1
5 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/w/components/block.tsx
View File

@@ -1,29 +1,28 @@
import Image from 'next/image'
import { AgentIcon, ApiIcon, ConditionalIcon } from '@/components/icons'
export interface BlockProps {
title: string
description: string
imagePath: string
type: 'agent' | 'api' | 'conditional'
bgColor: string
}
export function Block({
title,
description,
imagePath,
type,
bgColor,
}: BlockProps) {
const BLOCK_ICONS = {
agent: AgentIcon,
api: ApiIcon,
conditional: ConditionalIcon,
} as const
export function Block({ title, description, type, bgColor }: BlockProps) {
const Icon = BLOCK_ICONS[type]
const handleDragStart = (e: React.DragEvent) => {
// Pass block data as JSON string
e.dataTransfer.setData(
'application/json',
JSON.stringify({
type,
title,
description,
imagePath,
bgColor,
})
)
@@ -39,12 +38,10 @@ export function Block({
className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
style={{ backgroundColor: bgColor }}
>
<Image
src={imagePath}
alt={`${title} icon`}
width={22}
height={22}
className="transition-transform duration-200 group-hover:scale-110"
<Icon
className={`text-white transition-transform duration-200 group-hover:scale-110 ${
type === 'agent' ? 'w-[24px] h-[24px]' : 'w-[22px] h-[22px]'
}`}
/>
</div>
<div className="flex flex-col gap-1">

3
app/w/components/desktop-toolbar.tsx
View File

@@ -15,21 +15,18 @@ const BASIC_BLOCKS = [
type: 'agent',
title: 'Agent',
description: 'Use any LLM',
imagePath: '/blocks/agent.svg',
bgColor: BLOCK_COLORS.agent,
},
{
type: 'api',
title: 'API',
description: 'Connect to any API',
imagePath: '/blocks/api.svg',
bgColor: BLOCK_COLORS.api,
},
{
type: 'conditional',
title: 'Conditional',
description: 'Create branching logic',
imagePath: '/blocks/conditional.svg',
bgColor: BLOCK_COLORS.conditional,
},
] as const

9
app/w/layout.tsx
View File

@@ -27,6 +27,7 @@ import {
import Image from 'next/image'
import { DesktopToolbar } from './components/desktop-toolbar'
import { WorkflowControlBar } from './components/workflow-control-bar'
import { AgentIcon } from '@/components/icons'
export default function WorkspaceLayout({
children,
@@ -64,13 +65,7 @@ function DesktopNav() {
href="#"
className="group flex h-8 w-8 items-center justify-center rounded-lg bg-[#7F2FFF]"
>
<Image
src="/logo.svg"
alt="Sim Studio"
width={20}
height={20}
className="transition-all group-hover:scale-110 -translate-y-[0.5px]"
/>
<AgentIcon className="text-white transition-all group-hover:scale-110 -translate-y-[0.5px] w-5 h-5" />
<span className="sr-only">Sim Studio</span>
</Link>

74
components/icons.tsx
View File

@@ -87,40 +87,78 @@ export function Spinner() {
)
}
export function Logo() {
export function AgentIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
width="32"
height="32"
viewBox="0 0 32 32"
{...props}
width="21"
height="24"
viewBox="0 0 21 24"
fill="none"
className="text-gray-100"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="100%" height="100%" rx="16" fill="currentColor" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
fill="black"
d="M15.6667 9.25H4.66667C2.64162 9.25 1 10.8916 1 12.9167V18.4167C1 20.4417 2.64162 22.0833 4.66667 22.0833H15.6667C17.6917 22.0833 19.3333 20.4417 19.3333 18.4167V12.9167C19.3333 10.8916 17.6917 9.25 15.6667 9.25Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.1663 5.58464C11.1789 5.58464 11.9997 4.76382 11.9997 3.7513C11.9997 2.73878 11.1789 1.91797 10.1663 1.91797C9.15382 1.91797 8.33301 2.73878 8.33301 3.7513C8.33301 4.76382 9.15382 5.58464 10.1663 5.58464Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.167 5.58594V9.2526M7.41699 16.5859V14.7526M12.917 14.7526V16.5859"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
export function VercelLogo(props: React.SVGProps<SVGSVGElement>) {
export function ApiIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
aria-label="Vercel logomark"
height="64"
role="img"
viewBox="0 0 74 64"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
fill="currentColor"
></path>
d="M5.61111 24.3889C8.5 27.2778 12.4722 25.4722 13.5556 24.3889L15.7222 22.2222L7.77778 14.2778L5.61111 16.4444C4.52778 17.5278 2.72222 21.5 5.61111 24.3889ZM5.61111 24.3889L2 28M24.3889 5.61111C21.5 2.72222 17.5278 4.52778 16.4444 5.61111L14.2778 7.77778L22.2222 15.7222L24.3889 13.5556C25.4722 12.4722 27.2778 8.5 24.3889 5.61111ZM24.3889 5.61111L28 2M15.7222 9.22222L12.8333 12.1111M20.7778 14.2778L17.8889 17.1667"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
export function ConditionalIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
width="28"
height="29"
viewBox="0 0 28 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.1015 1.01616C22.1825 1.01442 21.2926 1.33795 20.5894 1.92946C19.8861 2.52098 19.4149 3.34229 19.2592 4.24794C19.1035 5.15358 19.2733 6.08512 19.7386 6.87755C20.2039 7.66998 20.9346 8.27217 21.8014 8.57745V12.7169H6.20035V8.57745C7.06779 8.27077 7.79888 7.6673 8.26441 6.87372C8.72994 6.08013 8.89994 5.14752 8.74435 4.24072C8.58877 3.33391 8.11762 2.5113 7.41419 1.91828C6.71075 1.32526 5.82032 1 4.90027 1C3.98021 1 3.08978 1.32526 2.38634 1.91828C1.68291 2.5113 1.21176 3.33391 1.05618 4.24072C0.900594 5.14752 1.07059 6.08013 1.53612 6.87372C2.00165 7.6673 2.73274 8.27077 3.60018 8.57745V12.7169C3.60018 13.4065 3.87413 14.0679 4.36175 14.5555C4.84938 15.0432 5.51074 15.3171 6.20035 15.3171H12.7008V20.7567C11.8333 21.0633 11.1023 21.6668 10.6367 22.4604C10.1712 23.254 10.0012 24.1866 10.1568 25.0934C10.3124 26.0002 10.7835 26.8228 11.4869 27.4158C12.1904 28.0089 13.0808 28.3341 14.0009 28.3341C14.9209 28.3341 15.8114 28.0089 16.5148 27.4158C17.2182 26.8228 17.6894 26.0002 17.845 25.0934C18.0005 24.1866 17.8305 23.254 17.365 22.4604C16.8995 21.6668 16.1684 21.0633 15.301 20.7567V15.3171H21.8014C22.491 15.3171 23.1524 15.0432 23.64 14.5555C24.1276 14.0679 24.4015 13.4065 24.4015 12.7169V8.57745C25.2683 8.27217 25.999 7.66998 26.4643 6.87755C26.9296 6.08512 27.0994 5.15358 26.9437 4.24794C26.788 3.34229 26.3168 2.52098 25.6135 1.92946C24.9103 1.33795 24.0204 1.01442 23.1015 1.01616ZM4.90027 6.2165C4.64313 6.2165 4.39177 6.14025 4.17798 5.99739C3.96418 5.85454 3.79754 5.65149 3.69914 5.41393C3.60074 5.17637 3.575 4.91497 3.62516 4.66278C3.67532 4.41059 3.79915 4.17893 3.98097 3.99711C4.16279 3.81529 4.39444 3.69147 4.64663 3.64131C4.89882 3.59114 5.16023 3.61689 5.39779 3.71529C5.63535 3.81369 5.83839 3.98033 5.98125 4.19412C6.1241 4.40792 6.20035 4.65928 6.20035 4.91641C6.20035 5.26122 6.06338 5.5919 5.81956 5.83571C5.57575 6.07953 5.24507 6.2165 4.90027 6.2165ZM14.0009 25.7178C13.7437 25.7178 13.4924 25.6415 13.2786 25.4987C13.0648 25.3558 12.8981 25.1528 12.7997 24.9152C12.7013 24.6777 12.6756 24.4163 12.7258 24.1641C12.7759 23.9119 12.8997 23.6802 13.0816 23.4984C13.2634 23.3166 13.495 23.1928 13.7472 23.1426C13.9994 23.0924 14.2608 23.1182 14.4984 23.2166C14.7359 23.315 14.939 23.4816 15.0818 23.6954C15.2247 23.9092 15.301 24.1606 15.301 24.4177C15.301 24.7625 15.164 25.0932 14.9202 25.337C14.6764 25.5808 14.3457 25.7178 14.0009 25.7178ZM23.1015 6.2165C22.8443 6.2165 22.593 6.14025 22.3792 5.99739C22.1654 5.85454 21.9987 5.65149 21.9003 5.41393C21.8019 5.17637 21.7762 4.91497 21.8264 4.66278C21.8765 4.41059 22.0003 4.17893 22.1822 3.99711C22.364 3.81529 22.5956 3.69147 22.8478 3.64131C23.1 3.59114 23.3614 3.61689 23.599 3.71529C23.8365 3.81369 24.0396 3.98033 24.1824 4.19412C24.3253 4.40792 24.4015 4.65928 24.4015 4.91641C24.4015 5.26122 24.2646 5.5919 24.0208 5.83571C23.777 6.07953 23.4463 6.2165 23.1015 6.2165Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="0.5"
/>
</svg>
)
}

5
public/logo.svg
View File

@@ -1,5 +0,0 @@
<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6667 9.25H4.66667C2.64162 9.25 1 10.8916 1 12.9167V18.4167C1 20.4417 2.64162 22.0833 4.66667 22.0833H15.6667C17.6917 22.0833 19.3333 20.4417 19.3333 18.4167V12.9167C19.3333 10.8916 17.6917 9.25 15.6667 9.25Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.1663 5.58464C11.1789 5.58464 11.9997 4.76382 11.9997 3.7513C11.9997 2.73878 11.1789 1.91797 10.1663 1.91797C9.15382 1.91797 8.33301 2.73878 8.33301 3.7513C8.33301 4.76382 9.15382 5.58464 10.1663 5.58464Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.167 5.58594V9.2526M7.41699 16.5859V14.7526M12.917 14.7526V16.5859" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 866 B