mirror of
https://github.com/kmc7468/arkvault.git
synced 2026-02-04 16:16:55 +00:00
Modal, AdaptiveDiv, BottomDiv 컴포넌트를 molecules 디렉터리로 이동 및 리팩토링
This commit is contained in:
@@ -1,26 +1,31 @@
|
||||
<script lang="ts">
|
||||
import type { ClassValue } from "svelte/elements";
|
||||
|
||||
interface Props {
|
||||
class?: ClassValue;
|
||||
placeholder: string;
|
||||
type?: "text" | "password";
|
||||
value?: string;
|
||||
}
|
||||
|
||||
let { placeholder, type = "text", value = $bindable("") }: Props = $props();
|
||||
let { placeholder, type = "text", value = $bindable(""), ...props }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="relative mt-5">
|
||||
<input
|
||||
bind:value
|
||||
{type}
|
||||
placeholder=""
|
||||
class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
|
||||
/>
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
|
||||
>
|
||||
{placeholder}
|
||||
</label>
|
||||
<div class={props.class}>
|
||||
<div class="relative mt-5">
|
||||
<input
|
||||
bind:value
|
||||
{type}
|
||||
placeholder=""
|
||||
class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
|
||||
/>
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label
|
||||
class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
|
||||
>
|
||||
{placeholder}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user