@opengis/cms 0.0.2 → 0.0.3

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/builder/vs-builder-content.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="w-full flex justify-center">
+    <div class="p-[20px] w-full max-w-[1440px]">
+      <button
+        @click="$router.back()"
+        class="text-blue-500 flex gap-2 items-center hover:text-blue-700 duration-300"
+      >
+        <IconArrorLeft /> Повернутися назад
+      </button>
+      <div class="flex items-center justify-between">
+        <div class="mt-[10px]">
+          <div class="flex items-end gap-1">
+            <h2 class="font-medium text-2xl">{{ objectData?.name }} -</h2>
+            <span class="text-gray-600 font-medium text-2xl">{{
+              objectData?.template
+            }}</span>
+          </div>
+          <p class="text-gray-600">{{ objectData?.description }}</p>
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            @click="formVisible = true"
+            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+          >
+            Редагувати
+          </button>
+          <button
+            @click="updateColumns"
+            class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+          >
+            Зберегти
+          </button>
+        </div>
+      </div>
+      <div>
+        <div class="w-full mt-[20px] bg-white rounded-xl">
+          <VsDataTable
+            class="w-full"
+            :colModel
+            v-model="colValue"
+            :addition="false"
+            :import="false"
+            :additionBottom="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <VsDialog title="Редагувати" v-model:visible="formVisible">
+    <div>
+      <VsForm
+        v-model="formValues"
+        :scheme="[...scheme, typeScheme]"
+        ref="form"
+      />
+    </div>
+    <template #footer>
+      <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+        <button
+          @click="formVisible = false"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-black border rounded-lg border-gray-200 hover:bg-gray-100 duration-300"
+        >
+          Скасувати</button
+        ><button
+          @click="updateData"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+        >
+          Зберегти
+        </button>
+      </div>
+    </template>
+  </VsDialog>
+</template>
+
+<script setup>
+import axios from "axios";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import IconArrorLeft from "../icons/icon-arrow-left.vue";
+import colModel from "../../templates/form-columns";
+import scheme from "../../templates/form-template";
+
+const route = useRoute();
+const $notify = getCurrentInstance().proxy?.$notify;
+
+const props = defineProps({ UPDATE: Object });
+
+const id = computed(() => route?.params?.id);
+const objectData = ref(null);
+const colValue = ref([]);
+const formValues = ref({});
+const formVisible = ref(false);
+const form = ref();
+
+const getDataById = async () => {
+  try {
+    const { data } = await axios.get(`/api/cms-builder/${id.value}`);
+    objectData.value = data?.rows?.[0];
+    formValues.value = data?.rows?.[0];
+    colValue.value = data?.rows?.[0]?.columns || [];
+  } catch (error) {}
+};
+
+const updateColumns = async () => {
+  try {
+    await axios.put(`/api/cms-builder/${id.value}`, {
+      ...objectData.value,
+      columns: colValue.value,
+    });
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Дані оновлено успішно",
+    });
+    await getDataById();
+  } catch (error) {
+    console.log(error);
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі оновити дані виникла помилка",
+    });
+  }
+};
+
+const updateData = async () => {
+  try {
+    await form.value.doValidation();
+    await axios.put(`/api/cms-builder/${id.value}`, formValues.value);
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Дані оновлено успішно",
+    });
+    await getDataById();
+    formVisible.value = false;
+    props.UPDATE.getList();
+  } catch (error) {
+    console.log(error);
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі оновити дані виникла помилка",
+    });
+  }
+};
+
+watch(id, getDataById);
+onMounted(() => getDataById());
+
+const typeScheme = {
+  key: "type",
+  type: "Autocomplete",
+  ua: "Тип",
+  searchable: false,
+  options: [
+    { id: "single", text: "Одиночний тип" },
+    { id: "collection", text: "Колекція" },
+  ],
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/builder/vs-builder-menu.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    class="p-4 w-[260px] border-r h-[100%] overflow-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-stone-100 [&::-webkit-scrollbar-thumb]:bg-stone-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
+  >
+    <div>
+      <h2
+        v
+        class="block text-[14px] font-medium text-gray-800 mb-2 dark:text-neutral-200"
+      >
+        Колекції
+      </h2>
+
+      <ul class="flex flex-col space-y-1">
+        <li
+          v-for="item in list?.filter((i) => i?.type == 'collection')"
+          :key="item?.id"
+        >
+          <router-link
+            :to="`/cms/builder/${item?.id}`"
+            :class="[$route?.params?.id === item?.id ? 'bg-gray-200' : '']"
+            class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-200 focus:outline-none dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
+          >
+            <IconPoint class="text-gray-500" />
+            {{ item?.name }}
+          </router-link>
+        </li>
+      </ul>
+      <button
+        @click="openFormCreate('colection')"
+        class="text-blue-500 flex text-[14px] py-2 px-2 text-nowrap hover:text-blue-700 duration-300 gap-2 items-center"
+      >
+        <IconPlus height="16" width="16" /> Створити нову колекцію
+      </button>
+    </div>
+    <div class="pt-2">
+      <h2
+        class="block text-[14px] mb-2 font-medium text-gray-800 dark:text-neutral-200"
+      >
+        Одиничні типи
+      </h2>
+      <ul class="flex flex-col space-y-1">
+        <li
+          v-for="item in list?.filter((i) => i?.type == 'single')"
+          :key="item?.id"
+        >
+          <router-link
+            :to="`/cms/builder/${item?.id}`"
+            :class="[$route?.params?.id === item?.id ? 'bg-gray-200' : '']"
+            class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 hover:bg-gray-200 rounded-lg focus:outline-none dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
+          >
+            <IconPoint class="text-gray-500" />
+            {{ item?.name }}
+          </router-link>
+        </li>
+      </ul>
+      <button
+        @click="openFormCreate('single')"
+        class="text-blue-500 flex text-[14px] py-2 px-2 hover:text-blue-700 duration-300 gap-2 items-center"
+      >
+        <IconPlus height="16" width="16" /> Створити новий тип
+      </button>
+    </div>
+  </div>
+  <VsDialog v-model:visible="formVisible" :title>
+    <div>
+      <VsForm v-model="formValues" :scheme ref="form" />
+    </div>
+    <template #footer>
+      <div class="flex justify-end p-[20px] gap-[10px] border-t w-full">
+        <button
+          @click="formVisible = false"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-black border rounded-lg border-gray-200 hover:bg-gray-100 duration-300"
+        >
+          Скасувати</button
+        ><button
+          @click="createObject"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
+        >
+          Зберегти
+        </button>
+      </div>
+    </template>
+  </VsDialog>
+</template>
+<script setup>
+import axios from "axios";
+import { getCurrentInstance, onMounted, ref } from "vue";
+import IconPoint from "../icons/icon-point.vue";
+import IconPlus from "../icons/icon.plus.vue";
+import scheme from "../../templates/form-template";
+
+const $notify = getCurrentInstance().proxy?.$notify;
+
+const UPDATE = defineModel("UPDATE");
+
+const list = ref(null);
+const formVisible = ref(false);
+const formValues = ref({});
+const title = ref("");
+const form = ref();
+
+const getList = async () => {
+  try {
+    const { data } = await axios.get("/api/cms-builder");
+    list.value = data?.rows || null;
+  } catch (error) {}
+};
+
+const openFormCreate = (type) => {
+  if (type === "single") {
+    formValues.value = { type: "single" };
+    title.value = "Створити новий тип";
+  } else {
+    formValues.value = { type: "collection" };
+    title.value = "Створити колекцію";
+  }
+  formVisible.value = true;
+};
+
+const createObject = async () => {
+  try {
+    await form.value.doValidation();
+    await axios.post("/api/cms-builder", formValues.value);
+    await $notify({
+      type: "success",
+      title: "Успішно!",
+      message: "Об'єкт створено успішно",
+    });
+    formVisible.value = false;
+    await getList();
+  } catch (error) {
+    await $notify({
+      type: "error",
+      title: "Помилка!",
+      message: "При спробі створити об'єкт виникла помилка",
+    });
+  }
+};
+
+getList();
+onMounted(() => (UPDATE.value.getList = () => getList()));
+</script>

package/src/components/formats/index.js

@@ -0,0 +1,8 @@
+import VsManagerTableDate from "./vs-manager-table-date.vue";
+import VsManagerTableSwitch from "./vs-manager-table-switch.vue";
+
+export default {
+    "switch" : VsManagerTableSwitch,
+    "switcher": VsManagerTableSwitch,
+    "date": VsManagerTableDate
+}

package/src/components/formats/vs-manager-table-date.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="whitespace-nowrap">{{ dateValue }}</div>
+</template>
+
+<script setup>
+import moment from "moment";
+import { computed } from "vue";
+
+const props = defineProps({
+  value: { type: String, default: () => "" },
+});
+
+const dateValue = computed(() => {
+  if (!props.value) return "-";
+  try {
+    const date = moment(props.value, "YYYY-MM-DD");
+    const createdDate = new Date(date);
+    return createdDate.toLocaleDateString("uk-UA", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    });
+  } catch (error) {
+    return props.value;
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/formats/vs-manager-table-switch.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="w-[20px] h-[20px] rounded-md flex items-center justify-center disabled"
+    :class="[value ? 'bg-blue-400' : 'border']"
+  >
+    <IconCheck height="18" width="18" class="text-white" />
+  </div>
+</template>
+
+<script setup>
+import IconCheck from "../icons/icon-check.vue";
+
+const props = defineProps({ value: { type: Boolean, default: () => false } });
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/icons/icon-actions.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    class="flex-shrink-0 size-3.5"
+    xmlns="http://www.w3.org/2000/svg"
+    width="22"
+    height="22"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="21" x2="14" y1="4" y2="4"></line>
+    <line x1="10" x2="3" y1="4" y2="4"></line>
+    <line x1="21" x2="12" y1="12" y2="12"></line>
+    <line x1="8" x2="3" y1="12" y2="12"></line>
+    <line x1="21" x2="16" y1="20" y2="20"></line>
+    <line x1="12" x2="3" y1="20" y2="20"></line>
+    <line x1="14" x2="14" y1="2" y2="6"></line>
+    <line x1="8" x2="8" y1="10" y2="14"></line>
+    <line x1="16" x2="16" y1="18" y2="22"></line>
+  </svg>
+</template>

package/src/components/icons/icon-arrow-left.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 12l14 0" />
+    <path d="M5 12l6 6" />
+    <path d="M5 12l6 -6" />
+  </svg>
+</template>

package/src/components/icons/icon-check.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="icon icon-tabler icons-tabler-outline icon-tabler-check"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 12l5 5l10 -10" />
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/icons/icon-chewron-right.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 6 10"
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m1 9 4-4-4-4"
+    />
+  </svg>
+</template>

package/src/components/icons/icon-close.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 6L6 18"
+      stroke="#6B7280"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 6L18 18"
+      stroke="#6B7280"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/icons/icon-edit.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1rem"
+    height="1rem"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M23.707.297A1 1 0 0 0 23 .004h-2a13.907 13.907 0 0 0-5.38 1.077 1 1 0 0 0-.615.923V4.92a.035.035 0 0 1-.022.038l-2-1.47a1 1 0 0 0-1.265.052A14 14 0 0 0 7 14.004v1.585l-2.707 2.707a1 1 0 1 0 1.415 1.415l2.707-2.708H10a14.014 14.014 0 0 0 14-14v-2a1 1 0 0 0-.293-.706ZM18 23.999H3a3 3 0 0 1-3-3V6A3 3 0 0 1 3 3h3a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3Z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/icons/icon-folder.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+  >
+    <path
+      d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"
+    ></path>
+    <path
+      d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/icon-folder2.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 8.2C3 7.07989 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H9.67452C10.1637 5 10.4083 5 10.6385 5.05526C10.8425 5.10425 11.0376 5.18506 11.2166 5.29472C11.4184 5.4184 11.5914 5.59135 11.9373 5.93726L12.0627 6.06274C12.4086 6.40865 12.5816 6.5816 12.7834 6.70528C12.9624 6.81494 13.1575 6.89575 13.3615 6.94474C13.5917 7 13.8363 7 14.3255 7H17.8C18.9201 7 19.4802 7 19.908 7.21799C20.2843 7.40973 20.5903 7.71569 20.782 8.09202C21 8.51984 21 9.0799 21 10.2V15.8C21 16.9201 21 17.4802 20.782 17.908C20.5903 18.2843 20.2843 18.5903 19.908 18.782C19.4802 19 18.9201 19 17.8 19H6.2C5.07989 19 4.51984 19 4.09202 18.782C3.71569 18.5903 3.40973 18.2843 3.21799 17.908C3 17.4802 3 16.9201 3 15.8V8.2Z"
+      stroke="#000000"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/icons/icon-home.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+    <polyline points="9 22 9 12 15 12 15 22"></polyline>
+  </svg>
+</template>

package/src/components/icons/icon-image.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    role="img"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+  >
+    <path
+      d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H 13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"
+    ></path>
+    <path
+      d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/icon-logo.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="31"
+    height="30"
+    viewBox="0 0 31 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M27.3044 11.5405C27.8889 11.9223 28.5318 12.2086 29.2086 12.3906V17.5268C26.4523 18.2695 24.4219 20.7272 24.4219 23.6324C24.4219 24.1752 24.4927 24.7121 24.6342 25.2311L20.0536 27.7962C19.5398 27.307 18.9492 26.9044 18.3001 26.6031V20.7063C20.5427 19.6773 22.0132 17.485 22.0132 14.9885C22.0132 14.8304 22.007 14.6723 21.9947 14.5142L27.3044 11.5405ZM27.4828 9.48242L20.0597 13.6403C20.192 14.0668 20.2658 14.5202 20.2658 14.9885C20.2658 17.1927 18.6785 19.039 16.5527 19.5103V27.7962C17.8632 28.0885 18.9676 28.9028 19.6229 30.0004L26.8214 25.9708C26.4092 25.2848 26.1723 24.4884 26.1723 23.6383C26.1723 21.0762 28.3165 18.9972 30.9591 18.9972V10.932C29.587 10.932 28.3565 10.3742 27.4828 9.48242Z"
+      fill="#CE4140"
+    ></path>
+    <path
+      d="M20.1119 2.21018L24.6218 4.73653C24.4895 5.24359 24.4218 5.76556 24.4218 6.29052C24.4218 6.46649 24.4279 6.64247 24.4433 6.81845L19.1736 9.76834C18.0938 9.04951 16.8018 8.6558 15.4759 8.6558C14.1593 8.6558 12.8734 9.04653 11.7967 9.75641L6.51157 6.79757C6.52388 6.63054 6.53311 6.46053 6.53311 6.29052C6.53311 5.76556 6.46543 5.24359 6.33315 4.73653L10.8399 2.21316C12.052 3.39431 13.7132 4.08332 15.4728 4.08332C17.2356 4.08332 18.8998 3.39133 20.1119 2.21018ZM19.6566 0C18.8383 1.42275 17.2725 2.38616 15.4728 2.38616C13.6732 2.38616 12.1074 1.42275 11.2891 0.0029827L4.1582 3.99384C4.55505 4.67091 4.78577 5.45238 4.78577 6.28753C4.78577 6.76775 4.71194 7.23007 4.57043 7.66256L11.9843 11.8115C12.858 10.9077 14.0977 10.344 15.4759 10.344C16.8602 10.344 18.1092 10.9137 18.9829 11.8264L26.3906 7.68045C26.2491 7.23901 26.1691 6.77073 26.1691 6.28455C26.1691 5.44939 26.3968 4.66793 26.7967 3.99085L19.6566 0Z"
+      fill="#CE4140"
+    ></path>
+    <path
+      d="M3.67003 11.5278L8.96434 14.4926C8.95203 14.6567 8.94588 14.8237 8.94588 14.9908C8.94588 17.4843 10.4164 19.6736 12.6528 20.7056V26.6054C12.0068 26.9066 11.4131 27.3093 10.9024 27.7955L6.32487 25.2333C6.46638 24.7144 6.53714 24.1745 6.53714 23.6316C6.53714 20.7235 4.50678 18.2687 1.75041 17.5261V12.3928C2.43028 12.2079 3.08245 11.9156 3.67003 11.5278ZM3.48545 9.4668C2.61178 10.3676 1.37511 10.9283 0 10.9283V18.9906C2.64254 18.9906 4.78672 21.0695 4.78672 23.6316C4.78672 24.4817 4.54985 25.2781 4.13762 25.9641L11.33 29.9908C11.9853 28.8961 13.0866 28.0818 14.3971 27.7895V19.5095C12.2744 19.0353 10.6901 17.192 10.6901 14.9878C10.6901 14.5105 10.764 14.0512 10.9024 13.6187L3.48545 9.4668Z"
+      fill="#CE4140"
+    ></path>
+  </svg>
+</template>

package/src/components/icons/icon-media.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1rem"
+    height="1rem"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M4.3.6a.9.9 0 1 0 0 1.8h15.311a.9.9 0 1 0 0-1.8H4.301Zm17.1 3.7A1.6 1.6 0 0 1 23 5.9v15.5a1.6 1.6 0 0 1-1.6 1.6H2.6A1.601 1.601 0 0 1 1 21.4V5.915C1 5.03 1.716 4.3 2.6 4.3h18.8ZM5.032 19.18h14.336l-3.136-3.205-1.792 1.831-4.032-4.12-5.376 5.494Zm13.44-8.697c0 1.282-.985 2.289-2.24 2.289-1.254 0-2.24-1.007-2.24-2.29 0-1.281.986-2.288 2.24-2.288 1.255 0 2.24 1.007 2.24 2.289Z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/icons/icon-point.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="5"
+    height="5"
+    fill="currentColor"
+    viewBox="0 0 4 4"
+  >
+    <rect width="4" height="4" fill="currentColor" rx="2"></rect>
+  </svg>
+</template>

package/src/components/icons/icon-search.vue

@@ -0,0 +1,22 @@
+<template lang="">
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
+      stroke="#6B7280"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.25 12.25L9.7417 9.7417"
+      stroke="#6B7280"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>