artegoser/AnoPaper
1
2
Fork 0
mirror of https://github.com/artegoser/AnoPaper.git synced 2024-11-22 20:06:21 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: Main Button

Browse source
This commit is contained in:
Artemy Egorov 2023-08-27 19:39:15 +03:00
parent 1bfb701872
commit ab4531064e
4 changed files with 43 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/app.html
View file

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body class="bg-white dark:bg-zinc-900" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

15
src/lib/components/buttons/Button.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
export let href: string;
export let width = 48;
export let color = 'bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800';
export let className = '';
export let onClick: () => void;
</script>
<a on:click={onClick} {href}>
<div
class="transition-transform ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 m-2 text-lg rounded-2xl w-{width} {color} {className}"
>
<slot />
</div>
</a>

4
src/routes/+layout.svelte
View file

@ -2,4 +2,6 @@
import '../app.css';
</script>
<slot />
<div class="text-black dark:text-white">
<slot />
</div>

13
src/routes/+page.svelte
View file

@ -1 +1,14 @@
<script>
import Button from '$lib/components/buttons/Button.svelte';
let count = 0;
let text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
function handleClick() {
count += 1;
text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
}
</script>
<h1 class="text-3xl font-bold underline">AnoPaper!</h1>
<Button onClick={handleClick} href="#">{text}</Button>