ADD: WIP Component

src/components/WIP.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="bg-wip w-full text-center p-8 text-zinc-200">
+    <span class="bg-black font-heading p-1">WORK IN PROGRESS</span>
+  </div>
+</template>
+
+<style scoped>
+.bg-wip {
+  --stripe-color-a: rgb(228 228 231);
+  --stripe-color-b: black;
+  --stripe-width: 1em;
+  background: repeating-linear-gradient(
+    45deg,
+    var(--stripe-color-a),
+    var(--stripe-color-a) var(--stripe-width),
+    var(--stripe-color-b) var(--stripe-width),
+    var(--stripe-color-b) calc(var(--stripe-width) * 2)
+  );
+}
+</style>

src/components/config/pages/ProfileConfig.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="w-96">
     <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
+      <WIP />
+      <div class="hidden">
         <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
@@ -32,6 +34,7 @@
               }}</Label>
           </div>
         </div>
+      </div>
     </ConfigSection>
     <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
       <div class="flex font-heading">
@@ -51,7 +54,7 @@
           }}:<br>
           <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
             class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-        <Separator/>
+        <Separator />
         <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
       </p>
     </ConfigSection>
@@ -68,6 +71,7 @@ import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
 import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
 import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
 import { Badge } from '@/components/ui/badge'
+import WIP from '@/components/WIP.vue'
 
 const connectionType = ref('usb') // TODO: replace with actual value