detail page port

components/svg/BtnOutline.vue

@@ -1,67 +0,0 @@
-<template>
-    <div class="svg-btn-outline">
-        <svg
-            class="side left"
-            width="16"
-            height="28"
-            viewBox="0 0 16 28"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
-                stroke="currentColor"
-            />
-        </svg>
-
-        <div class="fill">
-            <div class="borders" />
-        </div>
-
-        <svg
-            class="side right"
-            width="16"
-            height="28"
-            viewBox="0 0 16 28"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
-                stroke="currentColor"
-            />
-        </svg>
-    </div>
-</template>
-
-<style lang="scss">
-.svg-btn-outline {
-    grid-template-columns: auto 1fr auto;
-    display: grid;
-    align-items: center;
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-
-    .side {
-        height: 100%;
-
-        &.right {
-            transform: scaleX(-1);
-        }
-    }
-    .fill {
-        height: 100%;
-        position: relative;
-
-        .borders {
-            position: absolute;
-            inset: 0 -1px;
-            border: solid currentColor;
-            border-width: 1px 0;
-        }
-    }
-}
-</style>

components/svg/util/Arrow.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        class="svg-arrow"
+        width="23"
+        height="24"
+        viewBox="0 0 23 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M10.621 22.3448L20.9658 12L10.621 1.65519"
+            stroke="currentColor"
+            stroke-width="2"
+        />
+        <path
+            d="M20.9658 12L0.276165 12"
+            stroke="currentColor"
+            stroke-width="2"
+        />
+    </svg>
+</template>

components/svg/util/Spinner.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg
+        class="svg-util-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="margin: auto; display: block"
+        width="18px"
+        height="18px"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+    >
+        <circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke-width="4"
+            stroke="currentColor"
+            stroke-dasharray="62 62"
+            fill="none"
+            stroke-linecap="round"
+        >
+            <animateTransform
+                attributeName="transform"
+                type="rotate"
+                repeatCount="indefinite"
+                dur="1s"
+                keyTimes="0;1"
+                values="0 50 50;360 50 50"
+            ></animateTransform>
+        </circle>
+    </svg>
+</template>