feat: new layout

2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { isEmpty } from "lodash";
+const emit = defineEmits(["dropData", "selectComponent"]);
+
+const _props = defineProps<{
+  dataResult?: any[];
+}>();
+const SETTING_OPTIONS = {
+  BREADCRUMB_MAX_ELEMENT: 3,
+};
+</script>
+<template>
+  <div class="overflow-hidden">
+    <div class="breadcrumb">
+      <ul class="breadcrumb__list">
+        <li
+          class="breadcrumb__list__item"
+          v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
+          :key="index"
+          :class="isEmpty(item) && 'empty'"
+        >
+          <p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
+            {{ item?.title }}
+          </p>
+        </li>
+      </ul>
+
+      <p class="breakcrumb__time">Ngày tạo image</p>
+    </div>
+
+    <div class="content">Nội dung bài viết sẽ ở đây</div>
+
+    <div class="btn-wrap w-100 max-w">
+      <div class="center-y">
+        <p title="Quay trở lại" class="button--back">
+          <Icon name="fa6-solid:arrow-left" />
+        </p>
+        <button class="button--bookmark">
+          <Icon name="fa6-regular:bookmark" />
+        </button>
+      </div>
+
+      <div class="center-y">
+        <button title="Copy link" class="button--back copy-link">
+          <Icon name="mdi:link-variant" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$max-width: 680px;
+
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+      &:first-child {
+        color: blue;
+      }
+
+      &:not(:first-child):before {
+        content: "";
+        width: 7px;
+        height: 7px;
+        border-top: 1px solid #bdbdbd;
+        border-right: 1px solid #bdbdbd;
+        transform: rotate(45deg);
+        position: absolute;
+        left: -18px;
+        top: 8px;
+      }
+    }
+  }
+
+  &__time {
+    color: #9f9f9f;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+}
+
+.empty {
+  border-radius: 6px;
+  background: #409eff;
+  width: 40px;
+  min-height: 20px;
+}
+.content {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  padding: 20px;
+  border-radius: 8px;
+  background: #eeeeee;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.title {
+  white-space: normal;
+}
+
+.intro {
+  white-space: normal;
+  padding-bottom: 10px;
+  display: block;
+}
+
+.detail {
+  white-space: normal;
+}
+
+.btn-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+  .class-default,
+  .button--back,
+  .button--bookmark {
+    border-radius: 8px;
+    border-width: 1px;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    font-size: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    border: 1px solid rgb(229, 231, 235);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    &:hover {
+      background-color: #e6f4ff;
+      color: #3c7abc;
+    }
+
+    &.copy-link {
+      border-radius: 999px;
+    }
+  }
+}
+
+.breadcrumb,
+.btn-wrap {
+  max-width: $max-width;
+  margin: auto;
+}
+
+.center-y {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>