Merge pull request #189 from sboldyreva/components

Vue Components

Author: yel-hadd

docs/.vuepress/client.ts

@@ -15,6 +15,7 @@ import social from "./config-client/social";
 import Chat from "./components/Chat.vue";
 import CodeTabs from "./components/CodeTabs.vue";
 import CodeWithCopy from "./components/CodeWithCopy.vue";
+import TableTabs from "./components/TableTabs.vue";
 
 import CVETracker from './components/JavaSpringSolvedCveTable.vue'
 
@@ -27,6 +28,7 @@ export default defineClientConfig({
         app.component("CodeTabs", CodeTabs);
         app.component("CodeWithCopy", CodeWithCopy);
         app.component("CVETracker", CVETracker);
+        app.component("TableTabs", TableTabs);
     },
     layouts: {
         Layout,

docs/.vuepress/components/CodeTabs.vue

@@ -113,20 +113,34 @@ pre {
   background-color: transparent;
   color: #2d2d2d;
   font-size: 14px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  white-space: pre;
   max-width: 100%;
   line-height: 1.5;
   box-shadow: none;
+  overflow-x: auto;
+  scrollbar-width: thin;              /* Firefox */
+  scrollbar-color: #666 transparent;  /* Firefox */
+}
+
+/* WebKit browsers (Chrome, Edge, Safari) */
+pre::-webkit-scrollbar {
+  height: 6px;
+}
+
+pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background-color: #666;
+  border-radius: 4px;
 }
 
 code {
   color: #ccc;
   background: none;
   display: block;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  white-space: pre;
 }
 
 .copy-button {

docs/.vuepress/components/TableTabs.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ref, computed, useSlots } from 'vue'
+
+const slots = useSlots()
+const tabKeys = Object.keys(slots)
+const activeTab = ref(tabKeys[0] ?? '')
+const currentTab = computed(() => activeTab.value)
+</script>
+
+<template>
+  <div class="table-tabs mt-8 border rounded-lg overflow-hidden text-sm">
+    <div class="bg-gray-50 flex justify-between items-center border-b">
+<!--  <span class="font-medium text-gray-700">Optional Text:span>   -->
+      <select
+        v-model="activeTab"
+        class="bg-white text-gray-800 text-sm rounded border-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500"
+      >
+        <option v-for="key in tabKeys" :key="key" :value="key">
+          {{ key }}
+        </option>
+      </select>
+    </div>
+
+    <div class="tab-content prose prose-sm max-w-none">
+      <slot :name="currentTab" />
+    </div>
+  </div>
+</template>
+
+