From 00d48c562f336d0718aa71cdd9fdebe60890b486 Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@benndorf.dev>
Date: Thu, 22 Dec 2022 12:57:23 +0100
Subject: [PATCH] fix(frontend): hide downloads and views for now while they
 are broken, rewrite the whole system later

---
 .../src/lib/components/design/ComingSoon.vue  | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/lib/components/design/ComingSoon.vue

diff --git a/frontend/src/lib/components/design/ComingSoon.vue b/frontend/src/lib/components/design/ComingSoon.vue
new file mode 100644
index 000000000..f10bd5e0a
--- /dev/null
+++ b/frontend/src/lib/components/design/ComingSoon.vue
@@ -0,0 +1,51 @@
+<template>
+  <span class="coming-soon" title="Coming soon">
+    <render />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { VNode, computed, useSlots } from "vue";
+
+const props = defineProps<{
+  short?: boolean;
+}>();
+
+const slot = useSlots();
+
+const content = computed(() => {
+  const slotContent = slot?.default?.();
+  if (!slotContent) return;
+  for (const vnode of slotContent) {
+    replace(vnode);
+  }
+  return slotContent;
+});
+
+function replace(vnode: VNode) {
+  if (vnode.type.toString() === "Symbol(Text)") {
+    vnode.children = props.short ? "[R]" : "[REDACTED]";
+  }
+}
+
+const render = () => {
+  return content.value;
+};
+</script>
+
+<style lang="scss">
+.coming-soon {
+  --blur-color: #6695f2;
+  color: transparent;
+  display: inherit;
+  text-shadow: 0 0 12px var(--blur-color);
+
+  svg {
+    color: var(--blur-color);
+    filter: blur(4px);
+  }
+}
+.text-right .coming-soon {
+  float: right;
+}
+</style>