From 27fdf4a2d173c5e25bf8a911d88112711bb798e8 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Tue, 7 Jan 2025 18:42:24 -0800 Subject: [PATCH] Created icons instead of svgs for the blocks --- app/w/components/block.tsx | 31 ++++++------ app/w/components/desktop-toolbar.tsx | 3 -- app/w/layout.tsx | 9 +--- components/icons.tsx | 74 +++++++++++++++++++++------- public/logo.svg | 5 -- 5 files changed, 72 insertions(+), 50 deletions(-) delete mode 100644 public/logo.svg diff --git a/app/w/components/block.tsx b/app/w/components/block.tsx index dc4198102..de6e49e28 100644 --- a/app/w/components/block.tsx +++ b/app/w/components/block.tsx @@ -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 }} > - {`${title}
diff --git a/app/w/components/desktop-toolbar.tsx b/app/w/components/desktop-toolbar.tsx index 3e0d4ab76..e5af75b22 100644 --- a/app/w/components/desktop-toolbar.tsx +++ b/app/w/components/desktop-toolbar.tsx @@ -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 diff --git a/app/w/layout.tsx b/app/w/layout.tsx index 1fc42fe79..76ca30b3e 100644 --- a/app/w/layout.tsx +++ b/app/w/layout.tsx @@ -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]" > - Sim Studio + Sim Studio diff --git a/components/icons.tsx b/components/icons.tsx index 59c28f3fd..07bd7ae11 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -87,40 +87,78 @@ export function Spinner() { ) } -export function Logo() { +export function AgentIcon(props: React.SVGProps) { return ( - + + ) } -export function VercelLogo(props: React.SVGProps) { +export function ApiIcon(props: React.SVGProps) { return ( + 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" + /> + + ) +} + +export function ConditionalIcon(props: React.SVGProps) { + return ( + + ) } diff --git a/public/logo.svg b/public/logo.svg deleted file mode 100644 index 6bc3f5067..000000000 --- a/public/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - -