feat: add Badge component

src/components/layout/PanelBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Badge from "$components/ui/Badge.svelte";
   import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
   import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
   import Card from "./Card.svelte";
@@ -8,7 +9,7 @@
   <Card title="Фоновое изображение">фоновое изображение</Card>
 
   {#snippet panelTitle()}
-    Панели <span class="badge" id="panelCount">0</span>
+    Панели <Badge text="0" />
   {/snippet}
 
   {#snippet panelControls()}

src/components/ui/Badge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    text: string;
+  }
+
+  let { text }: Props = $props();
+</script>
+
+<span class="badge" id="panelCount">{text}</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background: var(--accent-light);
+    color: var(--accent-primary);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+</style>