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 | 72 +++++++++++++++++++++------- public/logo.svg | 5 -- 5 files changed, 71 insertions(+), 49 deletions(-) delete mode 100644 public/logo.svg diff --git a/app/w/components/block.tsx b/app/w/components/block.tsx index dc4198102e..de6e49e28b 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 3e0d4ab76a..e5af75b224 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 1fc42fe796..76ca30b3e2 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 59c28f3fd6..07bd7ae114 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 ( + + ) +} + +export function ConditionalIcon(props: React.SVGProps) { + return ( + + + stroke="currentColor" + strokeWidth="0.5" + /> ) } diff --git a/public/logo.svg b/public/logo.svg deleted file mode 100644 index 6bc3f5067d..0000000000 --- a/public/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - -