IconEntryButton 컴포넌트 추가

This commit is contained in:
static
2025-01-26 22:04:53 +09:00
parent c709a79266
commit 32ecf46341
13 changed files with 186 additions and 93 deletions

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { EntryButton } from "$lib/components/atoms";
import { IconEntryButton } from "$lib/components/molecules";
import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -16,17 +16,21 @@
<BottomSheet bind:isOpen>
<div class="w-full py-4">
<EntryButton onclick={onDirectoryCreateClick} class="w-full">
<div class="flex h-12 items-center gap-x-4">
<IconCreateNewFolder class="text-2xl text-yellow-500" />
<p class="font-medium">폴더 만들기</p>
</div>
</EntryButton>
<EntryButton onclick={onFileUploadClick} class="w-full">
<div class="flex h-12 items-center gap-x-4">
<IconUploadFile class="text-2xl text-blue-400" />
<p class="font-medium">파일 업로드</p>
</div>
</EntryButton>
<IconEntryButton
icon={IconCreateNewFolder}
onclick={onDirectoryCreateClick}
class="h-16 w-full"
iconClass="!text-2xl text-yellow-500"
>
폴더 만들기
</IconEntryButton>
<IconEntryButton
icon={IconUploadFile}
onclick={onFileUploadClick}
class="h-16 w-full"
iconClass="!text-2xl text-blue-400"
>
파일 업로드
</IconEntryButton>
</div>
</BottomSheet>

View File

@@ -1,10 +1,8 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { EntryButton } from "$lib/components/atoms";
import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
import { useContext } from "./service.svelte";
import IconFolder from "~icons/material-symbols/folder";
import IconDraft from "~icons/material-symbols/draft";
import IconEdit from "~icons/material-symbols/edit";
import IconDelete from "~icons/material-symbols/delete";
@@ -22,31 +20,14 @@
{@const { name, type } = context.selectedEntry}
<BottomSheet bind:isOpen>
<div class="w-full py-4">
<div class="flex h-12 items-center gap-x-4 p-2">
<div class="flex-shrink-0 text-lg">
{#if type === "directory"}
<IconFolder />
{:else}
<IconDraft class="text-blue-400" />
{/if}
</div>
<p title={name} class="flex-grow truncate font-semibold">
{name}
</p>
</div>
<DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
<div class="my-2 h-px w-full bg-gray-200"></div>
<EntryButton onclick={onRenameClick} class="w-full">
<div class="flex h-8 items-center gap-x-4">
<IconEdit class="text-lg" />
<p class="font-medium">이름 바꾸기</p>
</div>
</EntryButton>
<EntryButton onclick={onDeleteClick} class="w-full">
<div class="flex h-8 items-center gap-x-4 text-red-500">
<IconDelete class="text-lg" />
<p class="font-medium">삭제하기</p>
</div>
</EntryButton>
<IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
이름 바꾸기
</IconEntryButton>
<IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
삭제하기
</IconEntryButton>
</div>
</BottomSheet>
{/if}