61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<script setup>
|
|
defineProps({
|
|
activeMode: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
teleportTo: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['toggle'])
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport v-if="teleportTo" :to="teleportTo">
|
|
<button
|
|
class="admin-markdown-editor__mode-toggle inline-flex size-8 shrink-0 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
|
|
type="button"
|
|
:aria-label="activeMode === 'write' ? '미리보기로 전환' : '작성 모드로 전환'"
|
|
@click="emit('toggle')"
|
|
>
|
|
<svg
|
|
v-if="activeMode === 'write'"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="admin-markdown-editor__mode-icon lucide-book-open"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M12 7v14" />
|
|
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="admin-markdown-editor__mode-icon lucide-edit-3"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M13 21h8" />
|
|
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
|
|
</svg>
|
|
</button>
|
|
</Teleport>
|
|
</template>
|