kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-12 21:08:46 +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";

48
tailwind.config.ts
View File

@@ -4,7 +4,53 @@ export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
extend: {
colors: {
primary: {
"000": "#FFF5F5",
100: "#FFE3E3",
200: "#FFC9C9",
300: "#FFA8A8",
400: "#FF8787",
500: "#FF6B6B",
600: "#FA5252",
700: "#F03E3E",
800: "#E03131",
900: "#C92A2A",
},
gray: {
"000": "#F8F9FA",
100: "#F1F3F5",
200: "#E9ECEF",
300: "#DEE2E6",
400: "#CED4DA",
500: "#ADB5BD",
600: "#868E96",
700: "#495057",
800: "#343A40",
900: "#212529",
},
},
fontFamily: {
sans: [
'"Pretendard Variable"',
"Pretendard",
"-apple-system",
"BlinkMacSystemFont",
"system-ui",
"Roboto",
'"Helvetica Neue"',
'"Segoe UI"',
'"Apple SD Gothic Neo"',
'"Noto Sans KR"',
'"Malgun Gothic"',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
"sans-serif",
],
},
},
},
plugins: [],