From 1e5d1a7c44be43734e2e4a2ee36b1e52a4dffab8 Mon Sep 17 00:00:00 2001
From: JesusPerez <jpl@jesusperez.pro>
Date: Tue, 19 Oct 2021 21:46:47 +0100
Subject: [PATCH] chore add view and makdown for test

---
 src/views/About.md  | 21 ++++++++++++++++++
 src/views/Infos.vue | 54 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/views/About.md
 create mode 100644 src/views/Infos.vue

diff --git a/src/views/About.md b/src/views/About.md
new file mode 100644
index 0000000..c9465c3
--- /dev/null
+++ b/src/views/About.md
@@ -0,0 +1,21 @@
+---
+title: About
+---
+
+<div class="text-center">
+  <!-- You can use Vue components inside markdown -->
+  <carbon-dicom-overlay class="text-4xl mb-6 m-auto" />
+  <h3>About</h3>
+</div>
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
+
+```js
+// syntax highlighting example
+function vitesse() {
+  const foo = 'bar'
+  console.log(foo)
+}
+```
+
+heck out the [GitHub repo](https://github.com/antfu/vitesse) for more details.
diff --git a/src/views/Infos.vue b/src/views/Infos.vue
new file mode 100644
index 0000000..830d56a
--- /dev/null
+++ b/src/views/Infos.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { StatusItemType } from '~/typs/clouds'
+import { useI18n } from 'vue-i18n'
+const i18n = useI18n()
+const currentLocale = i18n.locale.value
+
+const props = defineProps<{
+  items: Array<StatusItemType>
+  title: string
+}>()
+const emit = defineEmits(['onCloudInfoItem'])
+const on_item = (item: StatusItemType, event: Event) => {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  event.stopPropagation()
+  emit('onCloudInfoItem', item)
+}
+</script>
+<template>
+  <div class="container mx-auto px-2 py-2 ">
+    <div id="srvcstatus" class="text-3xl bg-light-500 dark:bg-gray-400 dark:text-white p-3 rounded-xl">
+      {{ props.title }} 
+    </div>
+    <div class="leading-loose ml-2 text-lg mt-6">
+      <div v-for="item in props.items" :key="item.title">
+        <div v-if="currentLocale == item.lang">
+          <button
+            class="rounded bg-gray-200  dark:bg-gray-400 dark:text-gray-800 p-2 focus:outline-none w-full font-semibold border-b border-gray-400 dark:border-white py-2 flex justify-between items-center mt-4"
+            @click="on_item(item,$event)"
+          >
+            <!-- Specs has it that only one component can be open at a time and also you should be able to toggle the open state of the active component too -->
+            <div> {{ item.title }}</div>
+						<div class="flex-grow-0 flex"> 
+							<span class="text-sm text-gray-400 dark:text-gray-600 mr-2 py-1">{{item.datetime}}</span>
+							<svg v-show="!item.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
+								<path
+									class="heroicon-ui"
+									d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm1-9h2a1 1 0 010 2h-2v2a1 1 0 01-2 0v-2H9a1 1 0 010-2h2V9a1 1 0 012 0v2z"
+								/>
+							</svg>
+							<svg v-show="item.isOpen" class="fill-current" viewBox="0 0 24 24" width="24" height="24">
+								<path
+									class="heroicon-ui"
+									d="M12 22a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zm4-8a1 1 0 01-1 1H9a1 1 0 010-2h6a1 1 0 011 1z"
+								/>
+							</svg>
+						</div>
+          </button>
+          <div v-show="item.isOpen" class="p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-100 text-sm mt-0 text-left" v-html="item.content || ''"> </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>