style the ui component header

Author: Hetari

src/App.vue

@@ -1,31 +1,32 @@
 <template>
-  Test:
+  <h1>Vuejs Code Block UI Component</h1>
+
   <CodeBlock
+    class="pt-8"
     theme="dracula"
     :code="code"
     language="python"
     :numbered="true"
-    file-name="">
+    :show-header="true"
+    file-name="ss">
   </CodeBlock>
-  <!-- :lines-highlighted="[1, 2]"
-  :words-highlighted="['log']" -->
-  End of App.vue
-  <!-- <pre>
-    {{ langs }}
-  </pre> -->
 </template>
 
 <script setup lang="ts">
-  // import { CodeBlock } from '../dist';
-
   import { CodeBlock } from './components/code-block';
-
-  // import { Prism } from './components/prism-langs';
-  // const langs = ref(Object.keys(Prism.languages));
-
   const code = `print("Hello, World!")
 s = 2
 def add(a, b):
 const ant = 1
 `;
+
+  // import { CodeBlock } from '../dist';
+  // import { Prism } from './components/prism-langs';
+  // const langs = ref(Object.keys(Prism.languages));
 </script>
+
+<style>
+  .pt-8 {
+    padding-top: 2rem;
+  }
+</style>

src/components/code-block/CodeBlock.vue

@@ -1,18 +1,26 @@
 <template>
-  <img
-    width="240"
-    :src="icons[props.language]"
-    alt="" />
   <!-- Code Block Component -->
   <div
     :id="props.id"
     :class="`vuejs-code-block ${props.class} ${props.theme}`">
     <component
       ref="codeBlock"
       :is="props.asElement || 'pre'"
-      v-bind="$attrs">
+      v-bind="$attrs"
+      :style="props.showHeader ? '' : 'padding-top: 1rem'">
       <!-- Header Component  -->
-      <div class=""></div>
+      <div
+        v-if="props.showHeader"
+        class="header">
+        <div class="file-name">
+          <img
+            width="18"
+            :src="icons[props.language]"
+            alt="" />
+          <p>{{ props.fileName }}</p>
+        </div>
+        <div class="copy"></div>
+      </div>
 
       <!-- Line Component -->
       <slot>
@@ -57,7 +65,6 @@
   import { addThemeToCodeBlock, themes } from '../themes';
 
   const props = defineProps(codeBlockProps());
-  const langIcon = ref(`../icons/${props.language}.svg`);
 
   const codeBlock: Ref<HTMLDivElement | null> = ref(null);
 
@@ -98,20 +105,45 @@
   }
 
   .vuejs-code-block pre {
-    padding: 1rem;
+    padding-bottom: 1rem;
     border-radius: 0.25rem;
     border: 0.5px solid #888;
   }
 
+  .vuejs-code-block pre .header {
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    background-color: rgba(0, 0, 0, 0.001);
+    backdrop-filter: brightness(0.9);
+  }
+
+  .vuejs-code-block pre .header .file-name {
+    border-radius: 0.25rem;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem 5rem;
+    padding-left: 0.25rem;
+  }
+
+  .vuejs-code-block pre .header .file-name p {
+    font-size: 1rem;
+  }
+
   .vuejs-code-block pre .line {
+    padding: 0 1rem;
+
     display: flex;
     align-items: center;
+    font-size: 1rem;
   }
 
   .vuejs-code-block pre .line-number {
     color: #888;
     user-select: none;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     padding: 0.1rem 1rem 0.1rem 0;
   }
 </style>

src/components/code-block/types.ts

@@ -62,6 +62,11 @@ export const codeBlockProps = () =>
       type: String as PropType<string>,
       required: false,
       default: ''
+    },
+    showHeader: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false
     }
   } as const);