kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-15 22:38:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

기본 컴포넌트 추가

Browse Source
This commit is contained in:
static
2024-12-26 00:32:33 +09:00
parent e6f345bd3b
commit 8771b324a1
9 changed files with 141 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.html
View File

@@ -3,6 +3,12 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link
rel="stylesheet"
as="style"
crossorigin="anonymous"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>

7
src/lib/components/AdaptiveDiv.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
let { children } = $props();
</script>
<div class="mx-auto h-full w-full max-w-screen-md">
{@render children?.()}
</div>

28
src/lib/components/buttons/Button.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
interface Props {
children?: any;
color?: "primary" | "gray";
onclick?: () => void;
}
let { children, color = "primary", onclick }: Props = $props();
let bgColorStyle = $derived(
{
primary: "bg-primary-600 active:bg-primary-500",
gray: "bg-gray-300 active:bg-gray-400",
}[color],
);
let fontColorStyle = $derived(
{
primary: "text-white",
gray: "text-gray-800",
}[color],
);
</script>
<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 rounded-xl font-medium">
<div class="h-full w-full p-3 transition active:scale-95">
{@render children?.()}
</div>
</button>

14
src/lib/components/buttons/TextButton.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
interface Props {
children?: any;
onclick?: () => void;
}
let { children, onclick }: Props = $props();
</script>
<button {onclick} class="font-medium text-gray-800 active:rounded-xl active:bg-gray-100">
<div class="h-full w-full p-1 transition active:scale-95">
{@render children?.()}
</div>
</button>

2
src/lib/components/buttons/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as Button } from "./Button.svelte";
export { default as TextButton } from "./TextButton.svelte";

1
src/lib/components/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";

35
src/lib/components/inputs/TextInput.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
interface Props {
placeholder: string;
type?: "text" | "password";
value?: string;
}
let { placeholder, type = "text", value = $bindable("") }: Props = $props();
</script>
<div class="relative mt-6">
<input
bind:value
{type}
placeholder=" "
class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition-all duration-300 ease-in-out"
/>
<!-- svelte-ignore a11y_label_has_associated_control -->
<label
class="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>
<style>
input:focus,
input:not(:placeholder-shown) {
@apply border-primary-300;
}
input:focus + label,
input:not(:placeholder-shown) + label {
@apply text-primary-400 top-0 -translate-y-full text-sm;
}
</style>

1
src/lib/components/inputs/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as TextInput } from "./TextInput.svelte";