Загрузка...
Интерактивный дашборд AI-чата с тремя панелями на Tailwind CSS. Идеален для чат-ботов, командной работы и AI-ассистентов.
<div
class="overflow-hidden window-shadow bg-[#0e0f14] w-full h-full max-w-6xl max-h-[700px] border-white/10 border rounded-xl"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1)">
<!-- Traffic Lights & Title Bar -->
<div class="traffic-lights flex bg-[#1c1d26] border-white/5 border-b items-center"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1)">
<div class="flex gap-2 pr-4 pl-4 gap-x-2 gap-y-2">
<div class="traffic-light close"></div>
<div class="traffic-light minimize"></div>
<div class="traffic-light maximize"></div>
</div>
<div class="flex-1 text-center pr-20">
<span class="text-xs font-medium text-slate-400">Query</span>
</div>
</div>
<!-- Main Content Area -->
<div class="h-[calc(100%-44px)] flex">
<!-- Left Sidebar -->
<aside class="w-64 flex flex-col sidebar-bg border-r border-white/5">
<!-- Header -->
<div class="flex items-center gap-3 px-5 py-4 border-b border-white/5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot"
class="lucide lucide-bot w-5 h-5 text-blue-500" style="stroke-width: 1.5;">
<path d="M12 8V4H8" class=""></path>
<rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
<path d="M2 14h2" class=""></path>
<path d="M20 14h2" class=""></path>
<path d="M15 13v2" class=""></path>
<path d="M9 13v2" class=""></path>
</svg>
<h1 class="font-semibold text-base text-white">Sonai</h1>
<button class="ml-auto p-1.5 rounded-md hover:bg-white/5 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-4 h-4 text-slate-400" style="stroke-width: 1.5;">
<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
</button>
</div>
<!-- User Profile -->
<div class="flex items-center gap-3 px-5 py-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bd911a8c-0e75-4ab6-b048-7770f2843c83_320w.webp" class="w-7 h-7 rounded-full object-cover" alt="User avatar">
<span class="text-sm font-medium text-white">Sonai</span>
</div>
<!-- Search -->
<div class="px-5 pb-3">
<div class="relative">
<input type="text" placeholder="Search chats..." class="w-full rounded-md bg-[#0e0f14] text-xs placeholder-slate-500 py-1.5 pl-7 pr-3 border border-white/5 focus:border-blue-500/50 focus:outline-none transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search"
class="lucide lucide-search absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500"
style="stroke-width: 1.5;">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 overflow-y-auto px-3 space-y-5 py-2">
<div class="">
<h3 class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
Features
</h3>
<ul class="space-y-0.5">
<li class="">
<a href="#"
class="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-xs text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="layout-grid" class="lucide lucide-layout-grid w-4 h-4" style="stroke-width: 1.5;">
<rect width="7" height="7" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="14" rx="1" class=""></rect>
<rect width="7" height="7" x="3" y="14" rx="1" class=""></rect>
</svg>
Dashboard
</a>
</li>
<li class="">
<a href="#"
class="flex items-center gap-2.5 px-2 py-1.5 rounded-md bg-blue-500/15 text-blue-400 text-xs font-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="message-circle" class="lucide lucide-message-circle w-4 h-4" style="stroke-width: 1.5;">
<path
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
class=""></path>
</svg>
AI Chat
</a>
</li>
<li class="">
<a href="#"
class="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-xs text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="book" class="lucide lucide-book w-4 h-4" style="stroke-width: 1.5;">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
class=""></path>
</svg>
Library
</a>
</li>
<li class="">
<a href="#"
class="flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-xs text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="package" class="lucide lucide-package w-4 h-4" style="stroke-width: 1.5;">
<path
d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
class=""></path>
<path d="M12 22V12" class=""></path>
<polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
<path d="m7.5 4.27 9 5.15" class=""></path>
</svg>
Plugins
</a>
</li>
</ul>
</div>
<div class="">
<h3 class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
Recent
</h3>
<ul class="space-y-0.5 text-xs">
<li class="">
<a href="#"
class="block truncate px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-slate-300">
Retro style image generation with...
</a>
</li>
<li class="">
<a href="#"
class="block truncate px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-slate-300">
Text for a business solution for a...
</a>
</li>
<li class="">
<a href="#"
class="block truncate px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-slate-300">
Making a healthy eating plan
</a>
</li>
<li>
<a href="#"
class="block truncate px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-slate-300">
Video rendering and generation...
</a>
</li>
<li class="">
<a href="#"
class="block truncate px-2 py-1.5 rounded-md hover:bg-white/5 transition-colors text-slate-300">
Exporting files from the database
</a>
</li>
</ul>
</div>
</nav>
<!-- Team Invitation Card -->
<div
class="p-3 bg-gradient-to-br from-blue-500/20 via-indigo-500/20 to-purple-600/20 m-3 rounded-lg border border-blue-500/20">
<h4 class="text-xs font-semibold text-white mb-1.5">
Invite Teammates
</h4>
<p class="text-[10px] text-slate-300 mb-2">
Add team members to collaborate.
</p>
<div class="flex -space-x-1.5 mb-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ca687bcc-f3d6-4ed6-9efe-e0fd4cbe69a9_320w.webp" class="w-5 h-5 rounded-full border border-[#1c1d26] object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d74688b7-be82-48a3-9cec-f76b3dab7664_320w.webp" class="w-5 h-5 rounded-full border border-[#1c1d26] object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ce224171-c77b-4f9d-bcb4-78d291d25746_320w.webp" class="w-5 h-5 rounded-full border border-[#1c1d26] object-cover">
</div>
<button class="w-full text-center text-[10px] py-1.5 bg-white/10 hover:bg-white/15 rounded-md text-white font-medium transition-colors">
Invite
</button>
</div>
</aside>
<!-- Main Chat Area -->
<section class="flex-1 flex flex-col bg-[#0e0f14]" data-element-id="chat-section">
<!-- Chat Header -->
<header class="px-6 py-4 border-b border-white/5">
<h2 class="text-lg font-semibold text-white tracking-tight">
Chat with Command D+
</h2>
<p class="text-[11px] text-slate-400 mt-0.5">
Interactive tool for web searches, sourcing, research, drafting,
debugging and beyond
</p>
</header>
<!-- Chat Messages -->
<div class="flex-1 overflow-y-auto p-6 star-bg" data-element-id="chat-messages">
<div class="flex flex-col items-start gap-2 mb-6 group relative" data-message-id="msg-1">
<span class="text-[10px] text-slate-500 font-medium">
Sonai
</span>
<div
class="bg-[#1a1b23] text-slate-100 text-sm p-3.5 rounded-xl rounded-tl-sm max-w-lg border border-white/5">
A surreal scene with a large floating rock in a foggy minimal
environment...
</div>
<button class="absolute -right-6 top-8 p-1 rounded-md hover:bg-white/10 transition-colors opacity-0 group-hover:opacity-100" onclick="removeMessage('msg-1')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x w-3.5 h-3.5 text-slate-400 hover:text-red-400">
<path d="M18 6 6 18" class=""></path>
<path d="m6 6 12 12" class=""></path>
</svg>
</button>
</div>
<div class="flex gap-4 items-start mb-6 group relative" data-message-id="msg-2">
<div class="flex flex-col items-center gap-2">
<div class="rounded-lg overflow-hidden shadow-xl border border-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/97468273-333f-45d7-8939-24c254816fef_320w.webp" class="h-44 w-32 object-cover">
</div>
<div class="flex gap-1.5">
<button class="p-1.5 rounded-md hover:bg-white/10 transition-colors group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-3.5 h-3.5 text-slate-400 group-hover:text-red-400" style="stroke-width: 1.5;">
<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path>
</svg>
</button>
<button class="p-1.5 rounded-md hover:bg-white/10 transition-colors group" onclick="regenerateOutput('msg-2')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw w-3.5 h-3.5 text-slate-400 group-hover:text-white" style="stroke-width: 1.5;">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
<path d="M21 3v5h-5" class=""></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
<path d="M8 16H3v5" class=""></path>
</svg>
</button>
<button class="p-1.5 rounded-md hover:bg-white/10 transition-colors group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3.5 h-3.5 text-slate-400 group-hover:text-white" style="stroke-width: 1.5;">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" class=""></rect>
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" class=""></path>
</svg>
</button>
<button class="p-1.5 rounded-md hover:bg-white/10 transition-colors group" onclick="downloadOutput('msg-2')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-3.5 h-3.5 text-slate-400 group-hover:text-white" style="stroke-width: 1.5;">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
<div
class="bg-[#1a1b23] text-slate-100 text-sm p-3.5 rounded-xl rounded-tl-sm max-w-md border border-white/5">
Here is the floating rock in a foggy minimal environment. The
scene captures a mystical atmosphere with soft lighting and
ethereal qualities.
</div>
<button class="absolute -right-6 top-2 p-1 rounded-md hover:bg-white/10 transition-colors opacity-0 group-hover:opacity-100" onclick="removeMessage('msg-2')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x w-3.5 h-3.5 text-slate-400 hover:text-red-400">
<path d="M18 6 6 18" class=""></path>
<path d="m6 6 12 12" class=""></path>
</svg>
</button>
</div>
<div class="flex gap-2 mb-4">
<span class="inline-flex items-center gap-1.5 bg-[#242633] rounded-md px-2.5 py-1 text-[10px] text-white border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" class="lucide lucide-box w-3 h-3" style="stroke-width: 1.5;">
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path>
<path d="m3.3 7 8.7 5 8.7-5" class=""></path>
<path d="M12 22V12" class=""></path>
</svg>
3D Object
</span>
<span class="inline-flex items-center gap-1.5 bg-[#242633] rounded-md px-2.5 py-1 text-[10px] text-white border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text" class="lucide lucide-file-text w-3 h-3" style="stroke-width: 1.5;">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
<path d="M10 9H8" class=""></path>
<path d="M16 13H8" class=""></path>
<path d="M16 17H8" class=""></path>
</svg>
Documentation
</span>
</div>
</div>
<!-- Chat Input -->
<div class="border-t border-white/5 p-5 bg-[#0e0f14]">
<div
class="flex items-center gap-2 bg-[#1a1b23] rounded-lg px-3 border border-white/5 focus-within:border-blue-500/50 transition-colors">
<input type="file" id="file-input" class="hidden" accept="image/*,text/*,.txt,.md,.pdf,.doc,.docx" multiple="" onchange="handleFileSelect(event)">
<button class="p-1.5 rounded-md hover:bg-white/10 transition-colors" onclick="document.getElementById('file-input').click()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip w-4 h-4 text-slate-400" style="stroke-width: 1.5;">
<path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" class=""></path>
</svg>
</button>
<input type="text" id="message-input" placeholder="Message Sonai..." class="flex-1 bg-transparent border-none focus:ring-0 focus:outline-none text-sm placeholder-slate-500 text-white py-2.5" onkeydown="if(event.key === 'Enter') sendMessage()">
<button class="p-1.5 rounded-md bg-blue-500 text-white hover:bg-blue-600 transition-colors" onclick="sendMessage()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send w-4 h-4" style="stroke-width: 1.5;">
<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
<path d="m21.854 2.147-10.94 10.939" class=""></path>
</svg>
</button>
</div>
<div id="file-previews" class="mt-2 flex flex-wrap gap-2"></div>
<p class="mt-2 text-[10px] text-slate-500 text-center">
Sonai may display inaccurate information. Please verify details.
</p>
</div>
</section>
<!-- Right Sidebar -->
<aside class="w-64 sidebar-bg border-l border-white/5 flex flex-col overflow-hidden">
<!-- Panel Header -->
<header class="px-5 py-4 border-b border-white/5 flex items-center gap-2">
<h3 class="text-sm font-semibold text-white flex-1">AI Module</h3>
<select class="text-[11px] bg-[#0e0f14] text-white rounded-md border border-white/10 py-1 px-2 focus:outline-none focus:border-blue-500/50">
<option>Sonai 3.5</option>
<option>Sonai 4</option>
</select>
</header>
<!-- Tab Navigation -->
<div class="flex border-b border-white/5">
<button class="flex-1 py-2.5 text-[10px] font-semibold tracking-wider text-white relative hover:bg-white/5 transition-colors">
TOOLS
<span class="absolute left-0 bottom-0 h-0.5 w-full bg-blue-500"></span>
</button>
<button class="flex-1 py-2.5 text-[10px] font-semibold tracking-wider text-slate-400 hover:bg-white/5 hover:text-white transition-colors">
FILES
</button>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto px-5 py-4 space-y-6">
<!-- Projects Section -->
<div class="">
<div class="flex items-center gap-2 mb-3">
<h4 class="text-xs font-semibold text-white flex-1">
Your Projects
</h4>
<button class="text-[10px] bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded hover:bg-blue-500/30 transition-colors">
New
</button>
</div>
<ul class="space-y-2 text-xs">
<li class="">
<label class="flex items-center gap-2 cursor-pointer group">
<input type="checkbox" class="w-3.5 h-3.5 rounded border-slate-600 text-blue-500 focus:ring-blue-500 focus:ring-offset-0 bg-transparent">
<span class="text-slate-300 group-hover:text-white transition-colors">
Team Project
</span>
</label>
</li>
<li>
<details open="" class="group">
<summary class="flex items-center gap-2 cursor-pointer list-none">
<input type="checkbox" class="w-3.5 h-3.5 rounded border-slate-600 text-blue-500 focus:ring-blue-500 focus:ring-offset-0 bg-transparent">
<span class="text-white font-medium flex-1">
Personal Project
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down"
class="lucide lucide-chevron-down w-3.5 h-3.5 text-slate-400 transition-transform group-open:rotate-180"
style="stroke-width: 1.5;">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</summary>
<ul class="mt-1.5 pl-5 space-y-1 text-[11px] text-slate-400">
<li class="hover:text-slate-300 cursor-pointer transition-colors">
Retro style image generation wit...
</li>
<li class="hover:text-slate-300 cursor-pointer transition-colors">
Text for a business solution for a...
</li>
</ul>
</details>
</li>
<li>
<label class="flex items-center gap-2 cursor-pointer group">
<input type="checkbox" class="w-3.5 h-3.5 rounded border-slate-600 text-blue-500 focus:ring-blue-500 focus:ring-offset-0 bg-transparent">
<span class="text-slate-300 group-hover:text-white transition-colors">
Custom Project
</span>
</label>
</li>
</ul>
</div>
<!-- Integrations Section -->
<div class="">
<h4 class="text-xs font-semibold text-white mb-3">
Integrate Apps
</h4>
<ul class="space-y-3 text-xs">
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="slack" class="lucide lucide-slack w-4 h-4 text-slate-400" style="stroke-width: 1.5;">
<rect width="3" height="8" x="13" y="2" rx="1.5" class=""></rect>
<path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" class=""></path>
<rect width="3" height="8" x="8" y="14" rx="1.5" class=""></rect>
<path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" class=""></path>
<rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect>
<path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" class=""></path>
<rect width="8" height="3" x="2" y="8" rx="1.5" class=""></rect>
<path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" class=""></path>
</svg>
<span class="text-slate-300">Slack</span>
</div>
<label class="toggle-switch inline-flex items-center cursor-pointer">
<input type="checkbox" checked="" class="sr-only">
<span class="toggle-slider relative inline-block w-10 h-5 bg-slate-700 rounded-full transition-colors"></span>
</label>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="video" class="lucide lucide-video w-4 h-4 text-slate-400" style="stroke-width: 1.5;">
<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path>
<rect x="2" y="6" width="14" height="12" rx="2" class=""></rect>
</svg>
<span class="text-slate-300">Zoom</span>
</div>
<label class="toggle-switch inline-flex items-center cursor-pointer">
<input type="checkbox" checked="" class="sr-only">
<span class="toggle-slider relative inline-block w-10 h-5 bg-slate-700 rounded-full transition-colors"></span>
</label>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="briefcase" class="lucide lucide-briefcase w-4 h-4 text-slate-400"
style="stroke-width: 1.5;">
<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
<rect width="20" height="14" x="2" y="6" rx="2" class=""></rect>
</svg>
<span class="text-slate-300">Upwork</span>
</div>
<label class="toggle-switch inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only">
<span class="toggle-slider relative inline-block w-10 h-5 bg-slate-700 rounded-full transition-colors"></span>
</label>
</li>
</ul>
</div>
</div>
</aside>
</div>
</div>