Hugging Face's logo

Spaces:
enzostvs
/
whois
Running

App Files Community
1
enzostvs HF staff commited on
Commit
cd13b30
·
1 Parent(s): 4f55d45

add darkmode connected to store

Browse files
Files changed (21) hide show
  1. package-lock.json +36 -1
  2. package.json +4 -1
  3. src/app.d.ts +2 -1
  4. src/app.html +6 -0
  5. src/lib/assets/background.png +0 -0
  6. src/lib/assets/noisy.webp +0 -0
  7. src/lib/assets/tailwind.css +25 -1
  8. src/lib/components/HeroHeader.svelte +26 -0
  9. src/lib/components/icons/Datasets.svelte +4 -0
  10. src/lib/components/icons/Models.svelte +4 -0
  11. src/lib/components/icons/Spaces.svelte +4 -0
  12. src/lib/components/search/Search.svelte +18 -0
  13. src/lib/components/search/Select.svelte +55 -0
  14. src/lib/datas/namespaces.ts +16 -0
  15. src/lib/stores/use-dark-mode.ts +3 -0
  16. src/lib/types/index.ts +5 -0
  17. src/routes/+layout.svelte +43 -2
  18. src/routes/+page.svelte +8 -2
  19. src/routes/api/search.ts +15 -0
  20. svelte.config.js +5 -2
  21. tailwind.config.js +5 -0
package-lock.json CHANGED
@@ -8,7 +8,10 @@
8
  "name": "whois-huggingface",
9
  "version": "0.0.1",
10
  "dependencies": {
11
- "@sveltejs/adapter-node": "^1.3.1"
 
 
 
12
  },
13
  "devDependencies": {
14
  "@sveltejs/adapter-auto": "^2.0.0",
@@ -490,6 +493,25 @@
490
  "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
491
  "dev": true
492
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
493
  "node_modules/@jridgewell/gen-mapping": {
494
  "version": "0.3.3",
495
  "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -716,6 +738,11 @@
716
  "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
717
  "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
718
  },
 
 
 
 
 
719
  "node_modules/@sveltejs/adapter-auto": {
720
  "version": "2.1.1",
721
  "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.1.tgz",
@@ -3435,6 +3462,14 @@
3435
  "node": ">=12"
3436
  }
3437
  },
 
 
 
 
 
 
 
 
3438
  "node_modules/tailwindcss": {
3439
  "version": "3.3.6",
3440
  "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
 
8
  "name": "whois-huggingface",
9
  "version": "0.0.1",
10
  "dependencies": {
11
+ "@iconify/svelte": "^3.1.4",
12
+ "@svelte-put/clickoutside": "^3.0.1",
13
+ "@sveltejs/adapter-node": "^1.3.1",
14
+ "svelte-typewriter": "^3.2.2"
15
  },
16
  "devDependencies": {
17
  "@sveltejs/adapter-auto": "^2.0.0",
 
493
  "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
494
  "dev": true
495
  },
496
+ "node_modules/@iconify/svelte": {
497
+ "version": "3.1.4",
498
+ "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-3.1.4.tgz",
499
+ "integrity": "sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==",
500
+ "dependencies": {
501
+ "@iconify/types": "^2.0.0"
502
+ },
503
+ "funding": {
504
+ "url": "https://github.com/sponsors/cyberalien"
505
+ },
506
+ "peerDependencies": {
507
+ "svelte": "*"
508
+ }
509
+ },
510
+ "node_modules/@iconify/types": {
511
+ "version": "2.0.0",
512
+ "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
513
+ "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
514
+ },
515
  "node_modules/@jridgewell/gen-mapping": {
516
  "version": "0.3.3",
517
  "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 
738
  "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
739
  "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
740
  },
741
+ "node_modules/@svelte-put/clickoutside": {
742
+ "version": "3.0.1",
743
+ "resolved": "https://registry.npmjs.org/@svelte-put/clickoutside/-/clickoutside-3.0.1.tgz",
744
+ "integrity": "sha512-RhuRmD2RpXF63Mb48DxKkgqIPQ458TnL8M1m6HqtnPh5/g5p+PKIn/L2SPs1s9us2Kn02Y1/txHhOSYbVi6Z2Q=="
745
+ },
746
  "node_modules/@sveltejs/adapter-auto": {
747
  "version": "2.1.1",
748
  "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.1.tgz",
 
3462
  "node": ">=12"
3463
  }
3464
  },
3465
+ "node_modules/svelte-typewriter": {
3466
+ "version": "3.2.2",
3467
+ "resolved": "https://registry.npmjs.org/svelte-typewriter/-/svelte-typewriter-3.2.2.tgz",
3468
+ "integrity": "sha512-JpJCLuL3fjw5R6jR5YQPQERXtxh65fFXBodW1ipde56wspiknteFiNMn+P0T5hhiU561a6DHXhN5ipsFKIB9hg==",
3469
+ "peerDependencies": {
3470
+ "svelte": ">=3.47.x"
3471
+ }
3472
+ },
3473
  "node_modules/tailwindcss": {
3474
  "version": "3.3.6",
3475
  "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
package.json CHANGED
@@ -32,6 +32,9 @@
32
  },
33
  "type": "module",
34
  "dependencies": {
35
- "@sveltejs/adapter-node": "^1.3.1"
 
 
 
36
  }
37
  }
 
32
  },
33
  "type": "module",
34
  "dependencies": {
35
+ "@iconify/svelte": "^3.1.4",
36
+ "@svelte-put/clickoutside": "^3.0.1",
37
+ "@sveltejs/adapter-node": "^1.3.1",
38
+ "svelte-typewriter": "^3.2.2"
39
  }
40
  }
src/app.d.ts CHANGED
@@ -8,5 +8,6 @@ declare global {
8
  // interface Platform {}
9
  }
10
  }
 
11
 
12
- export {};
 
8
  // interface Platform {}
9
  }
10
  }
11
+ declare module 'svelte-click-outside';
12
 
13
+ export {};
src/app.html CHANGED
@@ -5,6 +5,12 @@
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
  %sveltekit.head%
 
 
 
 
 
 
8
  </head>
9
  <body data-sveltekit-preload-data="hover">
10
  <div style="display: contents">%sveltekit.body%</div>
 
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
  %sveltekit.head%
8
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Inter:wght@100;300;500;700&family=Poppins:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap"
12
+ rel="stylesheet"
13
+ />
14
  </head>
15
  <body data-sveltekit-preload-data="hover">
16
  <div style="display: contents">%sveltekit.body%</div>
src/lib/assets/background.png ADDED
src/lib/assets/noisy.webp ADDED
src/lib/assets/tailwind.css CHANGED
@@ -1,3 +1,27 @@
1
  @tailwind base;
2
  @tailwind components;
3
- @tailwind utilities;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  @tailwind base;
2
  @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ body, html {
6
+ @apply bg-slate-50 overflow-hidden min-h-screen font-sans transition-all duration-200;
7
+ }
8
+ body.dark {
9
+ @apply bg-zinc-950;
10
+ }
11
+
12
+ .dark #background__dotted {
13
+ @apply opacity-40;
14
+ }
15
+ #background__dotted {
16
+ @apply bg-blend-normal pointer-events-none opacity-70 transition-all duration-200;
17
+ background-size: 25ww auto;
18
+ background-image: url('./background.png');
19
+ @apply fixed w-screen h-screen -z-[1] top-0 left-0;
20
+ }
21
+
22
+ #background__noisy {
23
+ @apply bg-blend-normal pointer-events-none opacity-20;
24
+ background-size: 25ww auto;
25
+ background-image: url('./noisy.webp');
26
+ @apply fixed w-screen h-screen -z-[1] top-0 left-0;
27
+ }
src/lib/components/HeroHeader.svelte ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script>
2
+ import Typewriter from 'svelte-typewriter'
3
+ </script>
4
+
5
+ <div class="w-full">
6
+ <h1 class="text-black dark:text-white transition-all duration-200 text-center font-extrabold text-7xl font-title relative z-[2]">
7
+ Let's spy on
8
+ </h1>
9
+ <h1 class="max-w-max text-white dark:text-zinc-950 transition-all duration-200 text-center font-extrabold text-7xl font-title relative h-[80px] px-2.5 py-1 mx-auto">
10
+ <Typewriter mode="loop" showCursorOnDelaw={true} wordInterval={2000} cursor={false}>
11
+ <span>
12
+ spaces
13
+ </span>
14
+ <span>
15
+ models
16
+ </span>
17
+ <span>
18
+ datasets
19
+ </span>
20
+ <span data-static class={`z-[-1] bg-teal-500 dark:bg-gradient-to-br from-indigo-500 to-teal-500 -skew-x-12 absolute top-0 left-0 w-full h-full`}></span>
21
+ </Typewriter>
22
+ </h1>
23
+ <h2 class="text-center text-zinc-500 dark:text-zinc-300 transition-all duration-200 text-lg mt-5 max-w-lg mx-auto">
24
+ Find all the information you need about your favorite spaces, models and datasets.
25
+ </h2>
26
+ </div>
src/lib/components/icons/Datasets.svelte ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let size = '1em';
3
+ </script>
4
+ <svg class="text-gray-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width={size} height={size} preserveAspectRatio="xMidYMid meet" viewBox="0 0 25 25"><ellipse cx="12.5" cy="5" fill="currentColor" fill-opacity="0.25" rx="7.5" ry="2"></ellipse><path d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z" fill="currentColor" opacity="0.5"></path><path d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z" fill="currentColor" opacity="0.5"></path><path d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z" fill="currentColor"></path></svg>
src/lib/components/icons/Models.svelte ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let size = '1em';
3
+ </script>
4
+ <svg class="text-gray-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width={size} height={size} preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path class="uim-quaternary" d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z" opacity=".25" fill="currentColor"></path><path class="uim-tertiary" d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z" opacity=".5" fill="currentColor"></path><path class="uim-primary" d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z" fill="currentColor"></path></svg>
src/lib/components/icons/Spaces.svelte ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let size = '1em';
3
+ </script>
4
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width={size} height={size} preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M7.80914 18.7462V24.1907H13.2536V18.7462H7.80914Z" fill="#FF3270"></path><path d="M18.7458 18.7462V24.1907H24.1903V18.7462H18.7458Z" fill="#861FFF"></path><path d="M7.80914 7.80982V13.2543H13.2536V7.80982H7.80914Z" fill="#097EFF"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.41775C4 5.08246 5.08246 4 6.41775 4H14.6457C15.7626 4 16.7026 4.75724 16.9802 5.78629C18.1505 4.67902 19.7302 4 21.4685 4C25.0758 4 28.0003 6.92436 28.0003 10.5317C28.0003 12.27 27.3212 13.8497 26.2139 15.02C27.243 15.2977 28.0003 16.2376 28.0003 17.3545V25.5824C28.0003 26.9177 26.9177 28.0003 25.5824 28.0003H17.0635H14.9367H6.41775C5.08246 28.0003 4 26.9177 4 25.5824V15.1587V14.9367V6.41775ZM7.80952 7.80952V13.254H13.254V7.80952H7.80952ZM7.80952 24.1907V18.7462H13.254V24.1907H7.80952ZM18.7462 24.1907V18.7462H24.1907V24.1907H18.7462ZM18.7462 10.5317C18.7462 9.0283 19.9651 7.80952 21.4685 7.80952C22.9719 7.80952 24.1907 9.0283 24.1907 10.5317C24.1907 12.0352 22.9719 13.254 21.4685 13.254C19.9651 13.254 18.7462 12.0352 18.7462 10.5317Z" fill="black"></path><path d="M21.4681 7.80982C19.9647 7.80982 18.7458 9.02861 18.7458 10.5321C18.7458 12.0355 19.9647 13.2543 21.4681 13.2543C22.9715 13.2543 24.1903 12.0355 24.1903 10.5321C24.1903 9.02861 22.9715 7.80982 21.4681 7.80982Z" fill="#FFD702"></path></svg>
src/lib/components/search/Search.svelte ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import Select from "./Select.svelte";
3
+
4
+ let repoId = '';
5
+ let namespace: 'spaces' | 'models' | 'datasets' = 'spaces';
6
+
7
+ const handleChange = (e: any) => {
8
+ repoId = e.target.value;
9
+ }
10
+
11
+ $: disabled = !repoId || !namespace;
12
+
13
+ </script>
14
+ <div class="bg-white dark:bg-zinc-900 transition-all duration-200 rounded-full w-full max-w-3xl mx-auto shadow-sm flex items-center justify-start relative pl-8 pr-3 gap-5">
15
+ <Select namespace={namespace} onSelect={(ns) => namespace = ns}/>
16
+ <input type="text" value={repoId} placeholder="enzostvs/guess-the-image" class="placeholder:text-zinc-400 dark:placeholder:text-zinc-600 dark:text-white transition-all duration-200 flex-1 py-5 outline-none bg-transparent text-lg w-full" on:input={handleChange}>
17
+ <button disabled={disabled} class="bg-indigo-500 text-white font-title text-sm py-3.5 px-5 rounded-full font-medium disabled:bg-zinc-400/60 dark:disabled:bg-zinc-700/80 dark:disabled:text-zinc-900/80 disabled:text-zinc-500 transition-all duration-100 hover:bg-indigo-600">Search</button>
18
+ </div>
src/lib/components/search/Select.svelte ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import Icon from '@iconify/svelte';
3
+ import { clickoutside } from '@svelte-put/clickoutside';
4
+
5
+ import { NAMESPACES } from '$lib/datas/namespaces';
6
+
7
+ export let namespace: 'spaces' | 'models' | 'datasets';
8
+ export let onSelect: (name: 'spaces' | 'models' | 'datasets') => void;
9
+ let dropdown_is_open = false;
10
+
11
+
12
+ const handleSelect = (name: string) => {
13
+ onSelect(name.toLowerCase() as 'spaces' | 'models' | 'datasets');
14
+ dropdown_is_open = false;
15
+ }
16
+ </script>
17
+
18
+ <button
19
+ class="h-full w-full max-w-[200px] border-r-2 border-zinc-200/80 dark:border-zinc-800 transition-all duration-200 cursor-pointer flex items-center justify-center relative"
20
+ use:clickoutside on:clickoutside={() => dropdown_is_open = false}
21
+ on:click={() => dropdown_is_open = !dropdown_is_open}
22
+ >
23
+ <div class="flex items-center justify-between text-zinc-500 dark:text-zinc-300 transition-all duration-200 w-full pr-5">
24
+ {#if namespace}
25
+ <div class="flex items-center justify-start gap-3 capitalize text-zinc-800 dark:text-zinc-200 transition-all duration-200">
26
+ <svelte:component this={NAMESPACES.find(ns => ns.name.toLowerCase() === namespace)?.icon} size="24px" />
27
+ {namespace}
28
+ </div>
29
+ {:else}
30
+ Select a namespace
31
+ {/if}
32
+ <div class:rotate-180={!dropdown_is_open} class="transition-all duration-200">
33
+ <Icon icon="ep:arrow-up-bold" class="w-3 h-3 inline-block" />
34
+ </div>
35
+ </div>
36
+ <ul
37
+ class="bg-white dark:bg-zinc-900 shadow-sm rounded-b-2xl absolute bottom-0 left-0 w-full translate-y-full text-left px-2 pb-2 grid grid-cols-1 gap-1 transition-all duration-200"
38
+ class:pointer-events-none={!dropdown_is_open}
39
+ class:opacity-0={!dropdown_is_open}
40
+ >
41
+ {#each NAMESPACES as ns }
42
+ <button
43
+ class="flex items-center justify-start gap-4 hover:bg-zinc-100 dark:hover:bg-zinc-800/60 text-zinc-700 dark:text-zinc-300 transition-all duration-200 font-medium rounded-lg px-3 py-2.5 cursor-pointer"
44
+ on:click={(e) => {
45
+ e.preventDefault();
46
+ e.stopPropagation();
47
+ handleSelect(ns.name)
48
+ }}
49
+ >
50
+ <svelte:component this={ns.icon} size="24px" />
51
+ {ns.name}
52
+ </button>
53
+ {/each}
54
+ </ul>
55
+ </button>
src/lib/datas/namespaces.ts ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import type { Namespace } from "$lib/types";
2
+
3
+ import Spaces__SvelteComponent_ from "$lib/components/icons/Spaces.svelte";
4
+ import Models__SvelteComponent_ from "$lib/components/icons/Models.svelte";
5
+ import Datasets__SvelteComponent_ from "$lib/components/icons/Datasets.svelte";
6
+
7
+ export const NAMESPACES: Array<Namespace> = [{
8
+ icon: Models__SvelteComponent_,
9
+ name: "Models",
10
+ }, {
11
+ icon: Datasets__SvelteComponent_,
12
+ name: "Datasets"
13
+ }, {
14
+ icon: Spaces__SvelteComponent_,
15
+ name: "Spaces"
16
+ }]
src/lib/stores/use-dark-mode.ts ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ import { writable } from "svelte/store";
2
+
3
+ export const darkmodeStore = writable<boolean>(false);
src/lib/types/index.ts ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+
2
+ export interface Namespace {
3
+ icon: ConstructorOfATypedSvelteComponent;
4
+ name: string;
5
+ }
src/routes/+layout.svelte CHANGED
@@ -1,8 +1,49 @@
1
  <script>
 
 
 
 
2
  import "$lib/assets/tailwind.css";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  </script>
4
 
5
- <div class="p-10 h-screen flex items-center justify-center gap-6 flex-col">
6
- <p class="text-black text-center font-extrabold text-7xl">Whois 🔍</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <slot />
 
 
8
  </div>
 
1
  <script>
2
+ import { onDestroy } from 'svelte';
3
+ import { get } from "svelte/store";
4
+ import Icon from "@iconify/svelte";
5
+
6
  import "$lib/assets/tailwind.css";
7
+ import { darkmodeStore } from "$lib/stores/use-dark-mode";
8
+
9
+ let isDark = get(darkmodeStore);
10
+
11
+ const unsubscribe = darkmodeStore.subscribe((v) => {
12
+ if (typeof window === "undefined") return;
13
+ if (v) {
14
+ document.body.classList.add("dark");
15
+ } else {
16
+ document.body.classList.remove("dark");
17
+ }
18
+ isDark = v
19
+ });
20
+
21
+ onDestroy(() => {
22
+ unsubscribe();
23
+ });
24
  </script>
25
 
26
+ <div class="p-0 h-screen flex items-center justify-center gap-6 flex-col relative z-[1]">
27
+ <div class="absolute top-0 left-0 w-full">
28
+ <div class="container mx-auto flex items-center justify-between px-6 pt-4">
29
+ <p></p>
30
+ <button
31
+ class="flex items-center justify-center gap-2 bg-gradient-to-br from-indigo-500 to-teal-500 shadow-sm px-3 py-2.5 rounded-lg text-white dark:text-zinc-950 font-medium font-title text-sm transition-all duration-200 hover:bg-indigo-600"
32
+ on:click={() => {
33
+ darkmodeStore.update((v) => !v);
34
+ }}
35
+ >
36
+ {#if $darkmodeStore}
37
+ <Icon icon="tabler:bulb-off" class="w-5 h-5" />
38
+ Turn off the lights
39
+ {:else}
40
+ <Icon icon="heroicons-outline:light-bulb" class="w-5 h-5" />
41
+ Turn on the lights
42
+ {/if}
43
+ </button>
44
+ </div>
45
+ </div>
46
  <slot />
47
+ <div id="background__dotted"></div>
48
+ <div id="background__noisy"></div>
49
  </div>
src/routes/+page.svelte CHANGED
@@ -1,3 +1,9 @@
1
- <div class="text-white font-semibold uppercase rounded-full -tracking-wider bg-pink-500 px-6 py-3 max-w-max mx-auto animate-pulse">
2
- Building in progress...
 
 
 
 
 
 
3
  </div>
 
1
+ <script>
2
+ import HeroHeader from '$lib/components/HeroHeader.svelte';
3
+ import Search from '$lib/components/search/Search.svelte';
4
+ </script>
5
+
6
+ <div class="container w-full grid grid-cols-1 gap-8">
7
+ <HeroHeader />
8
+ <Search />
9
  </div>
src/routes/api/search.ts ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // import { env } from '$env/dynamic/private'
2
+ import type { RequestEvent } from "@sveltejs/kit";
3
+
4
+ /** @type {import('./$types').RequestHandler} */
5
+ export async function GET({ request }: RequestEvent) {
6
+ const body = await request?.json().catch(() => {});
7
+
8
+ console.log(body);
9
+
10
+ // return new Response({}, {
11
+ // headers: {
12
+ // 'Content-Type': 'image/png',
13
+ // },
14
+ // })
15
+ }
svelte.config.js CHANGED
@@ -1,4 +1,5 @@
1
- import adapter from '@sveltejs/adapter-node';
 
2
  import { vitePreprocess } from '@sveltejs/kit/vite';
3
 
4
  /** @type {import('@sveltejs/kit').Config} */
@@ -11,7 +12,9 @@ const config = {
11
  // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12
  // If your environment is not supported or you settled on a specific environment, switch out the adapter.
13
  // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14
- adapter: adapter({
 
 
15
  out: 'build',
16
  }),
17
  },
 
1
+ import adapter from '@sveltejs/adapter-auto';
2
+ import adapterNode from '@sveltejs/adapter-node';
3
  import { vitePreprocess } from '@sveltejs/kit/vite';
4
 
5
  /** @type {import('@sveltejs/kit').Config} */
 
12
  // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13
  // If your environment is not supported or you settled on a specific environment, switch out the adapter.
14
  // See https://kit.svelte.dev/docs/adapters for more information about adapters.
15
+ adapter: process.env.NODE_ENV === 'dev' ? adapter({
16
+ out: 'build',
17
+ }) : adapterNode({
18
  out: 'build',
19
  }),
20
  },
tailwind.config.js CHANGED
@@ -1,7 +1,12 @@
1
  /** @type {import('tailwindcss').Config} */
2
  export default {
3
  content: ['./src/**/*.{html,js,svelte,ts}'],
 
4
  theme: {
 
 
 
 
5
  extend: {},
6
  },
7
  plugins: [],
 
1
  /** @type {import('tailwindcss').Config} */
2
  export default {
3
  content: ['./src/**/*.{html,js,svelte,ts}'],
4
+ darkMode: 'class',
5
  theme: {
6
+ fontFamily: {
7
+ sans: ['Inter', 'sans-serif'],
8
+ title: ['Poppins', 'sans-serif'],
9
+ },
10
  extend: {},
11
  },
12
  plugins: [],