├── .npmrc
├── netlify.toml
├── static
    ├── favicon.png
    └── no_cover.png
├── .prettierignore
├── src
    ├── lib
    │   ├── components
    │   │   ├── ui
    │   │   │   ├── sonner
    │   │   │   │   ├── index.ts
    │   │   │   │   └── sonner.svelte
    │   │   │   ├── progress
    │   │   │   │   ├── index.ts
    │   │   │   │   └── progress.svelte
    │   │   │   ├── skeleton
    │   │   │   │   ├── index.ts
    │   │   │   │   └── skeleton.svelte
    │   │   │   ├── dialog
    │   │   │   │   ├── dialog-portal.svelte
    │   │   │   │   ├── dialog-header.svelte
    │   │   │   │   ├── dialog-footer.svelte
    │   │   │   │   ├── dialog-title.svelte
    │   │   │   │   ├── dialog-description.svelte
    │   │   │   │   ├── dialog-overlay.svelte
    │   │   │   │   ├── index.ts
    │   │   │   │   └── dialog-content.svelte
    │   │   │   ├── card
    │   │   │   │   ├── card-content.svelte
    │   │   │   │   ├── card-footer.svelte
    │   │   │   │   ├── card-header.svelte
    │   │   │   │   ├── card-description.svelte
    │   │   │   │   ├── card.svelte
    │   │   │   │   ├── card-title.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── pagination
    │   │   │   │   ├── pagination-item.svelte
    │   │   │   │   ├── pagination-content.svelte
    │   │   │   │   ├── pagination-ellipsis.svelte
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── pagination-next-button.svelte
    │   │   │   │   ├── pagination-prev-button.svelte
    │   │   │   │   ├── pagination-link.svelte
    │   │   │   │   └── pagination.svelte
    │   │   │   ├── select
    │   │   │   │   ├── select-separator.svelte
    │   │   │   │   ├── select-label.svelte
    │   │   │   │   ├── index.ts
    │   │   │   │   ├── select-trigger.svelte
    │   │   │   │   ├── select-content.svelte
    │   │   │   │   └── select-item.svelte
    │   │   │   ├── table
    │   │   │   │   ├── table-body.svelte
    │   │   │   │   ├── table-caption.svelte
    │   │   │   │   ├── table-footer.svelte
    │   │   │   │   ├── table-cell.svelte
    │   │   │   │   ├── table.svelte
    │   │   │   │   ├── table-head.svelte
    │   │   │   │   ├── table-header.svelte
    │   │   │   │   ├── table-row.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── badge
    │   │   │   │   ├── badge.svelte
    │   │   │   │   └── index.ts
    │   │   │   ├── button
    │   │   │   │   ├── button.svelte
    │   │   │   │   └── index.ts
    │   │   │   └── input
    │   │   │   │   ├── index.ts
    │   │   │   │   └── input.svelte
    │   │   ├── GlobalLoading.svelte
    │   │   ├── BookSkeleton.svelte
    │   │   ├── ThemeSwitch.svelte
    │   │   ├── Paginator.svelte
    │   │   ├── SearchBar.svelte
    │   │   ├── DownloadProgress.svelte
    │   │   └── BookUI.svelte
    │   ├── index.ts
    │   ├── constants.ts
    │   ├── types
    │   │   └── Book.ts
    │   └── utils.ts
    ├── app.d.ts
    ├── store
    │   ├── globalStore.ts
    │   └── downloadStore.ts
    ├── app.html
    ├── routes
    │   ├── +page.svelte
    │   ├── search
    │   │   ├── +page.server.ts
    │   │   └── +page.svelte
    │   └── +layout.svelte
    └── app.css
├── postcss.config.js
├── vite.config.ts
├── .gitignore
├── .prettierrc
├── components.json
├── tsconfig.json
├── eslint.config.js
├── svelte.config.js
├── README.md
├── package.json
└── tailwind.config.ts


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = "build"
4 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/henacodes/libros/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/static/no_cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/henacodes/libros/HEAD/static/no_cover.png


--------------------------------------------------------------------------------
/src/lib/components/ui/sonner/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Toaster } from "./sonner.svelte";
2 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/progress/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./progress.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Progress,
7 | };
8 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/skeleton/index.ts:
--------------------------------------------------------------------------------
1 | import Root from "./skeleton.svelte";
2 | 
3 | export {
4 | 	Root,
5 | 	//
6 | 	Root as Skeleton,
7 | };
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const API_SERVER_URL =  'https://libros-server.onrender.com'; //'http://localhost:3000';
2 | export const NOT_AVAILABLE = 'N/A';
3 | export const DOWNLOAD_HISTORY = 'download-history';
4 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-portal.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
3 | 	type $$Props = DialogPrimitive.PortalProps;
4 | </script>
5 | 
6 | <DialogPrimitive.Portal {...$$restProps}>
7 | 	<slot />
8 | </DialogPrimitive.Portal>
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | /.svelte-kit
 7 | /build
 8 | /.netlify
 9 | # OS
10 | .DS_Store
11 | Thumbs.db
12 | 
13 | # Env
14 | .env
15 | .env.*
16 | !.env.example
17 | !.env.test
18 | 
19 | # Vite
20 | vite.config.js.timestamp-*
21 | vite.config.ts.timestamp-*
22 | 


--------------------------------------------------------------------------------
/src/lib/components/GlobalLoading.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
 3 | </script>
 4 | 
 5 | <div
 6 | 	class=" fixed left-0 top-0 z-50 flex h-[100vh] w-[100vw] items-center justify-center bg-white/40"
 7 | >
 8 | 	<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": "*.svelte",
10 | 			"options": {
11 | 				"parser": "svelte"
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://shadcn-svelte.com/schema.json",
 3 | 	"style": "default",
 4 | 	"tailwind": {
 5 | 		"config": "tailwind.config.ts",
 6 | 		"css": "src\\app.css",
 7 | 		"baseColor": "slate"
 8 | 	},
 9 | 	"aliases": {
10 | 		"components": "$lib/components",
11 | 		"utils": "$lib/utils"
12 | 	},
13 | 	"typescript": true
14 | }


--------------------------------------------------------------------------------
/src/store/globalStore.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | 
 3 | const globalStore = writable({ loading: false });
 4 | 
 5 | export const toggleLoading = (state?: boolean) =>
 6 | 	globalStore.update((curr) => ({
 7 | 		...curr,
 8 | 		loading: typeof state === 'boolean' ? state : !curr.loading
 9 | 	}));
10 | 
11 | export default globalStore;
12 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 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>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("p-6", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLLIElement>;
 6 | 	let className: $$Props["class"] = undefined;
 7 | 
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <li class={cn("", className)} {...$$restProps}>
12 | 	<slot />
13 | </li>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/skeleton/skeleton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("bg-muted animate-pulse rounded-md", className)} {...$$restProps}></div>
12 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-separator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = SelectPrimitive.SeparatorProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />
12 | 


--------------------------------------------------------------------------------
/src/lib/types/Book.ts:
--------------------------------------------------------------------------------
 1 | export default interface Book {
 2 | 	id: string;
 3 | 	authors: string;
 4 | 	title: string;
 5 | 	publisher: string;
 6 | 	year: string;
 7 | 	pages: string;
 8 | 	language: string;
 9 | 	size: string;
10 | 	extension: string;
11 | 	mirror: string;
12 | 	thumbUrl?: string;
13 | }
14 | 
15 | export interface BookDownload extends Book {
16 | 	loaded: number;
17 | 	total: number;
18 | 	done?: boolean;
19 | 	date?: Date;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
12 | 	<slot />
13 | </p>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-body.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
12 | 	<slot />
13 | </tbody>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLUListElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
12 | 	<slot />
13 | </ul>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
12 | 	<slot />
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-caption.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
12 | 	<slot />
13 | </caption>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <tfoot class={cn("bg-primary text-primary-foreground font-medium", className)} {...$$restProps}>
12 | 	<slot />
13 | </tfoot>
14 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-footer.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLDivElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div
12 | 	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLTdAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLTdAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <td
12 | 	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
13 | 	{...$$restProps}
14 | 	on:click
15 | 	on:keydown
16 | >
17 | 	<slot />
18 | </td>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-label.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = SelectPrimitive.LabelProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <SelectPrimitive.Label
12 | 	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </SelectPrimitive.Label>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLTableAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLTableAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <div class="relative w-full overflow-auto">
12 | 	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
13 | 		<slot />
14 | 	</table>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = DialogPrimitive.TitleProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Title
12 | 	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Title>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-description.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = DialogPrimitive.DescriptionProps;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <DialogPrimitive.Description
12 | 	class={cn("text-muted-foreground text-sm", className)}
13 | 	{...$$restProps}
14 | >
15 | 	<slot />
16 | </DialogPrimitive.Description>
17 | 


--------------------------------------------------------------------------------
/src/lib/components/BookSkeleton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Skeleton } from '$lib/components/ui/skeleton';
 3 | </script>
 4 | 
 5 | <div>
 6 | 	<Skeleton class="h-[16rem] w-full rounded-xl bg-slate-200  " />
 7 | 	<Skeleton class="mt-2 h-[15px] w-[60%] rounded " />
 8 | 	<Skeleton class="mt-2 h-[15px] w-[70%] rounded " />
 9 | 	<Skeleton class="mt-2 h-[15px] w-[100%] rounded " />
10 | 	<Skeleton class="mt-2 h-[15px] w-[85%] rounded " />
11 | 	<Skeleton class="mt-3 h-[3rem] w-full rounded-xl bg-slate-200  " />
12 | </div>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-head.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLThAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLThAttributes;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <th
12 | 	class={cn(
13 | 		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
14 | 		className
15 | 	)}
16 | 	{...$$restProps}
17 | >
18 | 	<slot />
19 | </th>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-header.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
12 | <thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
13 | 	<slot />
14 | </thead>
15 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	// svelte core
 3 | 
 4 | 	// third party
 5 | 
 6 | 	// shadcdn components
 7 | 
 8 | 	// custom components
 9 | 
10 | 	// custom types
11 | 	// stores
12 | 	import SearchBar from '$lib/components/SearchBar.svelte';
13 | 	import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
14 | </script>
15 | 
16 | <div class="  flex h-[100vh] w-full flex-col">
17 | 	<div>
18 | 		<ThemeSwitch className="m-6" />
19 | 	</div>
20 | 	<div class=" mx-2 flex h-full justify-center">
21 | 		<SearchBar />
22 | 	</div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/badge/badge.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { type Variant, badgeVariants } from "./index.js";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	let className: string | undefined | null = undefined;
 6 | 	export let href: string | undefined = undefined;
 7 | 	export let variant: Variant = "default";
 8 | 	export { className as class };
 9 | </script>
10 | 
11 | <svelte:element
12 | 	this={href ? "a" : "span"}
13 | 	{href}
14 | 	class={cn(badgeVariants({ variant, className }))}
15 | 	{...$$restProps}
16 | >
17 | 	<slot />
18 | </svelte:element>
19 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/table-row.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
 6 | 		"data-state"?: unknown;
 7 | 	};
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <tr
14 | 	class={cn(
15 | 		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | 	on:click
20 | 	on:keydown
21 | >
22 | 	<slot />
23 | </tr>
24 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-ellipsis.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Ellipsis from "lucide-svelte/icons/ellipsis";
 3 | 	import type { HTMLAttributes } from "svelte/elements";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export { className as class };
10 | </script>
11 | 
12 | <span
13 | 	aria-hidden
14 | 	class={cn("flex h-9 w-9 items-center justify-center", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<Ellipsis class="h-4 w-4" />
18 | 	<span class="sr-only">More pages</span>
19 | </span>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/card-title.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLAttributes } from "svelte/elements";
 3 | 	import type { HeadingLevel } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 7 | 		tag?: HeadingLevel;
 8 | 	};
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export let tag: $$Props["tag"] = "h3";
12 | 	export { className as class };
13 | </script>
14 | 
15 | <svelte:element
16 | 	this={tag}
17 | 	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
18 | 	{...$$restProps}
19 | >
20 | 	<slot />
21 | </svelte:element>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/card/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./card.svelte";
 2 | import Content from "./card-content.svelte";
 3 | import Description from "./card-description.svelte";
 4 | import Footer from "./card-footer.svelte";
 5 | import Header from "./card-header.svelte";
 6 | import Title from "./card-title.svelte";
 7 | 
 8 | export {
 9 | 	Root,
10 | 	Content,
11 | 	Description,
12 | 	Footer,
13 | 	Header,
14 | 	Title,
15 | 	//
16 | 	Root as Card,
17 | 	Content as CardContent,
18 | 	Description as CardDescription,
19 | 	Footer as CardFooter,
20 | 	Header as CardHeader,
21 | 	Title as CardTitle,
22 | };
23 | 
24 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
25 | 


--------------------------------------------------------------------------------
/src/lib/components/ThemeSwitch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Sun from 'lucide-svelte/icons/sun';
 3 | 	import Moon from 'lucide-svelte/icons/moon';
 4 | 
 5 | 	import { toggleMode } from 'mode-watcher';
 6 | 	import { Button } from '$lib/components/ui/button/index.js';
 7 | 
 8 | 	export let className = '';
 9 | </script>
10 | 
11 | <Button on:click={toggleMode} variant="outline" size="icon" class={className}>
12 | 	<Sun
13 | 		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
14 | 	/>
15 | 	<Moon
16 | 		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
17 | 	/>
18 | 	<span class="sr-only">Toggle theme</span>
19 | </Button>
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import { fade } from "svelte/transition";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = DialogPrimitive.OverlayProps;
 7 | 
 8 | 	let className: $$Props["class"] = undefined;
 9 | 	export let transition: $$Props["transition"] = fade;
10 | 	export let transitionConfig: $$Props["transitionConfig"] = {
11 | 		duration: 150,
12 | 	};
13 | 	export { className as class };
14 | </script>
15 | 
16 | <DialogPrimitive.Overlay
17 | 	{transition}
18 | 	{transitionConfig}
19 | 	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
20 | 	{...$$restProps}
21 | />
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/table/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./table.svelte";
 2 | import Body from "./table-body.svelte";
 3 | import Caption from "./table-caption.svelte";
 4 | import Cell from "./table-cell.svelte";
 5 | import Footer from "./table-footer.svelte";
 6 | import Head from "./table-head.svelte";
 7 | import Header from "./table-header.svelte";
 8 | import Row from "./table-row.svelte";
 9 | 
10 | export {
11 | 	Root,
12 | 	Body,
13 | 	Caption,
14 | 	Cell,
15 | 	Footer,
16 | 	Head,
17 | 	Header,
18 | 	Row,
19 | 	//
20 | 	Root as Table,
21 | 	Body as TableBody,
22 | 	Caption as TableCaption,
23 | 	Cell as TableCell,
24 | 	Footer as TableFooter,
25 | 	Head as TableHead,
26 | 	Header as TableHeader,
27 | 	Row as TableRow,
28 | };
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | 	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16 | 	//
17 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/progress/progress.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Progress as ProgressPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 
 5 | 	type $$Props = ProgressPrimitive.Props;
 6 | 
 7 | 	let className: $$Props["class"] = undefined;
 8 | 	export let max: $$Props["max"] = 100;
 9 | 	export let value: $$Props["value"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <ProgressPrimitive.Root
14 | 	class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
15 | 	{...$$restProps}
16 | >
17 | 	<div
18 | 		class="bg-primary h-full w-full flex-1 transition-all"
19 | 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
20 | 	></div>
21 | </ProgressPrimitive.Root>
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/sonner/sonner.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 3 | 	import { mode } from "mode-watcher";
 4 | 
 5 | 	type $$Props = SonnerProps;
 6 | </script>
 7 | 
 8 | <Sonner
 9 | 	theme={$mode}
10 | 	class="toaster group"
11 | 	toastOptions={{
12 | 		classes: {
13 | 			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
14 | 			description: "group-[.toast]:text-muted-foreground",
15 | 			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
16 | 			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
17 | 		},
18 | 	}}
19 | 	{...$$restProps}
20 | />
21 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./pagination.svelte";
 2 | import Content from "./pagination-content.svelte";
 3 | import Item from "./pagination-item.svelte";
 4 | import Link from "./pagination-link.svelte";
 5 | import PrevButton from "./pagination-prev-button.svelte";
 6 | import NextButton from "./pagination-next-button.svelte";
 7 | import Ellipsis from "./pagination-ellipsis.svelte";
 8 | 
 9 | export {
10 | 	Root,
11 | 	Content,
12 | 	Item,
13 | 	Link,
14 | 	PrevButton,
15 | 	NextButton,
16 | 	Ellipsis,
17 | 	//
18 | 	Root as Pagination,
19 | 	Content as PaginationContent,
20 | 	Item as PaginationItem,
21 | 	Link as PaginationLink,
22 | 	PrevButton as PaginationPrevButton,
23 | 	NextButton as PaginationNextButton,
24 | 	Ellipsis as PaginationEllipsis,
25 | };
26 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import eslint from '@eslint/js';
 2 | import prettier from 'eslint-config-prettier';
 3 | import svelte from 'eslint-plugin-svelte';
 4 | import globals from 'globals';
 5 | import tseslint from 'typescript-eslint';
 6 | 
 7 | export default tseslint.config(
 8 | 	eslint.configs.recommended,
 9 | 	...tseslint.configs.recommended,
10 | 	...svelte.configs['flat/recommended'],
11 | 	prettier,
12 | 	...svelte.configs['flat/prettier'],
13 | 	{
14 | 		languageOptions: {
15 | 			globals: {
16 | 				...globals.browser,
17 | 				...globals.node
18 | 			}
19 | 		}
20 | 	},
21 | 	{
22 | 		files: ['**/*.svelte'],
23 | 		languageOptions: {
24 | 			parserOptions: {
25 | 				parser: tseslint.parser
26 | 			}
27 | 		}
28 | 	},
29 | 	{
30 | 		ignores: ['build/', '.svelte-kit/', 'dist/']
31 | 	}
32 | );
33 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Button as ButtonPrimitive } from "bits-ui";
 3 | 	import { type Events, type Props, buttonVariants } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = Props;
 7 | 	type $$Events = Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let variant: $$Props["variant"] = "default";
11 | 	export let size: $$Props["size"] = "default";
12 | 	export let builders: $$Props["builders"] = [];
13 | 	export { className as class };
14 | </script>
15 | 
16 | <ButtonPrimitive.Root
17 | 	{builders}
18 | 	class={cn(buttonVariants({ variant, size, className }))}
19 | 	type="button"
20 | 	{...$$restProps}
21 | 	on:click
22 | 	on:keydown
23 | >
24 | 	<slot />
25 | </ButtonPrimitive.Root>
26 | 


--------------------------------------------------------------------------------
/src/routes/search/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { API_SERVER_URL } from '$lib/constants.js';
 2 | 
 3 | export const load = async ({ url, fetch }) => {
 4 | 	const query = url.searchParams.get('query');
 5 | 	const filterBy = url.searchParams.get('filterBy');
 6 | 	const currentPage = url.searchParams.get('page');
 7 | 	if (!query) {
 8 | 		return new Response(JSON.stringify({ error: 'Query parameter is missing' }), { status: 400 });
 9 | 	}
10 | 
11 | 	const response = await fetch(
12 | 		`${API_SERVER_URL}/books/search?query=${query}&filterBy=${filterBy}&page=${currentPage}`
13 | 	);
14 | 
15 | 	const serverResponse = await response.json();
16 | 	return {
17 | 		query,
18 | 		currentPage,
19 | 		searchResults: serverResponse.data.searchResults,
20 | 		filterBy,
21 | 		totalPages: serverResponse.data.totalPages,
22 | 		error: serverResponse.error
23 | 	};
24 | };
25 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 2 | import adapter from '@sveltejs/adapter-netlify';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
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 | 		alias: {
16 | 			'@/*': './path/to/lib/*',
17 | 			$store: 'src/store/'
18 | 		}
19 | 	}
20 | };
21 | 
22 | export default config;
23 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-next-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import ChevronRight from "lucide-svelte/icons/chevron-right";
 4 | 	import { Button } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = PaginationPrimitive.NextButtonProps;
 8 | 	type $$Events = PaginationPrimitive.NextButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <PaginationPrimitive.NextButton asChild let:builder>
15 | 	<Button
16 | 		variant="ghost"
17 | 		class={cn("gap-1 pr-2.5", className)}
18 | 		builders={[builder]}
19 | 		on:click
20 | 		{...$$restProps}
21 | 	>
22 | 		<slot>
23 | 			<span>Next</span>
24 | 			<ChevronRight class="h-4 w-4" />
25 | 		</slot>
26 | 	</Button>
27 | </PaginationPrimitive.NextButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-prev-button.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 4 | 	import { Button } from "$lib/components/ui/button/index.js";
 5 | 	import { cn } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = PaginationPrimitive.PrevButtonProps;
 8 | 	type $$Events = PaginationPrimitive.PrevButtonEvents;
 9 | 
10 | 	let className: $$Props["class"] = undefined;
11 | 	export { className as class };
12 | </script>
13 | 
14 | <PaginationPrimitive.PrevButton asChild let:builder>
15 | 	<Button
16 | 		variant="ghost"
17 | 		class={cn("gap-1 pl-2.5", className)}
18 | 		builders={[builder]}
19 | 		on:click
20 | 		{...$$restProps}
21 | 	>
22 | 		<slot>
23 | 			<ChevronLeft class="h-4 w-4" />
24 | 			<span>Previous</span>
25 | 		</slot>
26 | 	</Button>
27 | </PaginationPrimitive.PrevButton>
28 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | import { Select as SelectPrimitive } from "bits-ui";
 2 | 
 3 | import Label from "./select-label.svelte";
 4 | import Item from "./select-item.svelte";
 5 | import Content from "./select-content.svelte";
 6 | import Trigger from "./select-trigger.svelte";
 7 | import Separator from "./select-separator.svelte";
 8 | 
 9 | const Root = SelectPrimitive.Root;
10 | const Group = SelectPrimitive.Group;
11 | const Input = SelectPrimitive.Input;
12 | const Value = SelectPrimitive.Value;
13 | 
14 | export {
15 | 	Root,
16 | 	Group,
17 | 	Input,
18 | 	Label,
19 | 	Item,
20 | 	Value,
21 | 	Content,
22 | 	Trigger,
23 | 	Separator,
24 | 	//
25 | 	Root as Select,
26 | 	Group as SelectGroup,
27 | 	Input as SelectInput,
28 | 	Label as SelectLabel,
29 | 	Item as SelectItem,
30 | 	Value as SelectValue,
31 | 	Content as SelectContent,
32 | 	Trigger as SelectTrigger,
33 | 	Separator as SelectSeparator,
34 | };
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/badge/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } from "tailwind-variants";
 2 | export { default as Badge } from "./badge.svelte";
 3 | 
 4 | export const badgeVariants = tv({
 5 | 	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
 6 | 	variants: {
 7 | 		variant: {
 8 | 			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
 9 | 			secondary:
10 | 				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
11 | 			destructive:
12 | 				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
13 | 			outline: "text-foreground",
14 | 		},
15 | 	},
16 | 	defaultVariants: {
17 | 		variant: "default",
18 | 	},
19 | });
20 | 
21 | export type Variant = VariantProps<typeof badgeVariants>["variant"];
22 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/index.ts:
--------------------------------------------------------------------------------
 1 | import Root from "./input.svelte";
 2 | 
 3 | export type FormInputEvent<T extends Event = Event> = T & {
 4 | 	currentTarget: EventTarget & HTMLInputElement;
 5 | };
 6 | export type InputEvents = {
 7 | 	blur: FormInputEvent<FocusEvent>;
 8 | 	change: FormInputEvent<Event>;
 9 | 	click: FormInputEvent<MouseEvent>;
10 | 	focus: FormInputEvent<FocusEvent>;
11 | 	focusin: FormInputEvent<FocusEvent>;
12 | 	focusout: FormInputEvent<FocusEvent>;
13 | 	keydown: FormInputEvent<KeyboardEvent>;
14 | 	keypress: FormInputEvent<KeyboardEvent>;
15 | 	keyup: FormInputEvent<KeyboardEvent>;
16 | 	mouseover: FormInputEvent<MouseEvent>;
17 | 	mouseenter: FormInputEvent<MouseEvent>;
18 | 	mouseleave: FormInputEvent<MouseEvent>;
19 | 	mousemove: FormInputEvent<MouseEvent>;
20 | 	paste: FormInputEvent<ClipboardEvent>;
21 | 	input: FormInputEvent<InputEvent>;
22 | 	wheel: FormInputEvent<WheelEvent>;
23 | };
24 | 
25 | export {
26 | 	Root,
27 | 	//
28 | 	Root as Input,
29 | };
30 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination-link.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 	import { cn } from "$lib/utils.js";
 4 | 	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
 5 | 
 6 | 	type $$Props = PaginationPrimitive.PageProps &
 7 | 		Props & {
 8 | 			isActive: boolean;
 9 | 		};
10 | 
11 | 	type $$Events = PaginationPrimitive.PageEvents;
12 | 
13 | 	let className: $$Props["class"] = undefined;
14 | 	export let page: $$Props["page"];
15 | 	export let size: $$Props["size"] = "icon";
16 | 	export let isActive: $$Props["isActive"] = false;
17 | 
18 | 	export { className as class };
19 | </script>
20 | 
21 | <PaginationPrimitive.Page
22 | 	bind:page
23 | 	class={cn(
24 | 		buttonVariants({
25 | 			variant: isActive ? "outline" : "ghost",
26 | 			size,
27 | 		}),
28 | 		className
29 | 	)}
30 | 	{...$$restProps}
31 | 	on:click
32 | >
33 | 	<slot>{page.value}</slot>
34 | </PaginationPrimitive.Page>
35 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/pagination/pagination.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Pagination as PaginationPrimitive } from "bits-ui";
 3 | 
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = PaginationPrimitive.Props;
 7 | 	type $$Events = PaginationPrimitive.Events;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let count: $$Props["count"] = 0;
11 | 	export let perPage: $$Props["perPage"] = 10;
12 | 	export let page: $$Props["page"] = 1;
13 | 	export let siblingCount: $$Props["siblingCount"] = 1;
14 | 	export { className as class };
15 | 
16 | 	$: currentPage = page;
17 | </script>
18 | 
19 | <PaginationPrimitive.Root
20 | 	{count}
21 | 	{perPage}
22 | 	{siblingCount}
23 | 	bind:page
24 | 	let:builder
25 | 	let:pages
26 | 	let:range
27 | 	asChild
28 | 	{...$$restProps}
29 | >
30 | 	<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
31 | 		<slot {pages} {range} {currentPage} />
32 | 	</nav>
33 | </PaginationPrimitive.Root>
34 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
 1 | import { Dialog as DialogPrimitive } from "bits-ui";
 2 | 
 3 | import Title from "./dialog-title.svelte";
 4 | import Portal from "./dialog-portal.svelte";
 5 | import Footer from "./dialog-footer.svelte";
 6 | import Header from "./dialog-header.svelte";
 7 | import Overlay from "./dialog-overlay.svelte";
 8 | import Content from "./dialog-content.svelte";
 9 | import Description from "./dialog-description.svelte";
10 | 
11 | const Root = DialogPrimitive.Root;
12 | const Trigger = DialogPrimitive.Trigger;
13 | const Close = DialogPrimitive.Close;
14 | 
15 | export {
16 | 	Root,
17 | 	Title,
18 | 	Portal,
19 | 	Footer,
20 | 	Header,
21 | 	Trigger,
22 | 	Overlay,
23 | 	Content,
24 | 	Description,
25 | 	Close,
26 | 	//
27 | 	Root as Dialog,
28 | 	Title as DialogTitle,
29 | 	Portal as DialogPortal,
30 | 	Footer as DialogFooter,
31 | 	Header as DialogHeader,
32 | 	Trigger as DialogTrigger,
33 | 	Overlay as DialogOverlay,
34 | 	Content as DialogContent,
35 | 	Description as DialogDescription,
36 | 	Close as DialogClose,
37 | };
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | 
 3 | Welcome to the **Libros**! This project is created by [@Henacodes](https://github.com/henacodes), serves as a learning experience and a platform for collaboration. If you're experienced with **Svelte** and **Tailwind CSS**, I'd love to connect and work together!
 4 | 
 5 | ## How to run the Libros locally
 6 | 
 7 | Make sure you have **Git** and **NodeJS** installed on your computer.
 8 | 
 9 | ```Bash
10 | # Clone the project
11 | git clone https://github.com/henacodes/libros
12 | 
13 | # Install npm packages
14 | # first you have to be in the project directory
15 | npm install
16 | 
17 | # Run
18 | npm run dev
19 | 
20 | # Build before you make a pull request
21 | npm run build
22 | ```
23 | 
24 | ## Contribute
25 | 
26 | I welcome contributions! After cloning and running the project locally, feel free to make changes. If everything works as expected, please create a pull request to the main branch.
27 | 
28 | ## Thank you!
29 | 
30 | Thank you for checking out this project! Your feedback and contributions are greatly appreciated.
31 | 


--------------------------------------------------------------------------------
/src/store/downloadStore.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | import type { BookDownload } from '$lib/types/Book';
 3 | import type Book from '$lib/types/Book';
 4 | 
 5 | const downloadStore = writable({ downloads: [] } as { downloads: BookDownload[] });
 6 | 
 7 | export const addDownloadHistory = (books: BookDownload[]) => {
 8 | 	downloadStore.update((curr) => ({ ...curr, downloads: [...curr.downloads, ...books] }));
 9 | };
10 | 
11 | export const addDownload = (book: Book) => {
12 | 	let newDownload: BookDownload = { ...book, loaded: 0, total: 0 };
13 | 	downloadStore.update((curr) => ({
14 | 		...curr,
15 | 		downloads: [newDownload, ...curr.downloads]
16 | 	}));
17 | };
18 | 
19 | export const updateDownloadStatus = (book: Book, loaded: number, total: number, done = false) => {
20 | 	downloadStore.update((curr) => ({
21 | 		...curr,
22 | 		downloads: curr.downloads.map((b) => {
23 | 			if (book.id === b.id) {
24 | 				return {
25 | 					...b,
26 | 					loaded,
27 | 					total,
28 | 					done
29 | 				};
30 | 			}
31 | 			return b;
32 | 		})
33 | 	}));
34 | };
35 | 
36 | export default downloadStore;
37 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-trigger.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import ChevronDown from "lucide-svelte/icons/chevron-down";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.TriggerProps;
 7 | 	type $$Events = SelectPrimitive.TriggerEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export { className as class };
11 | </script>
12 | 
13 | <SelectPrimitive.Trigger
14 | 	class={cn(
15 | 		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
16 | 		className
17 | 	)}
18 | 	{...$$restProps}
19 | 	let:builder
20 | 	on:click
21 | 	on:keydown
22 | >
23 | 	<slot {builder} />
24 | 	<div>
25 | 		<ChevronDown class="h-4 w-4 opacity-50" />
26 | 	</div>
27 | </SelectPrimitive.Trigger>
28 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	// svelte core
 3 | 
 4 | 	// third party
 5 | 
 6 | 	// shadcdn components
 7 | 	import { Toaster } from '$lib/components/ui/sonner';
 8 | 	import { ModeWatcher } from 'mode-watcher';
 9 | 
10 | 	// custom components
11 | 	import GlobalLoading from '$lib/components/GlobalLoading.svelte';
12 | 	import '../app.css';
13 | 
14 | 	// custom types
15 | 
16 | 	// stores
17 | 	import globalStore from '../store/globalStore';
18 | 	import { onMount } from 'svelte';
19 | 	import { DOWNLOAD_HISTORY } from '$lib/constants';
20 | 	import { addDownloadHistory } from '$store/downloadStore';
21 | 	import type { BookDownload } from '$lib/types/Book';
22 | 
23 | 	onMount(() => {
24 | 		if (window) {
25 | 			let storage = localStorage.getItem(DOWNLOAD_HISTORY);
26 | 			if (storage !== '' && storage !== null) {
27 | 				let downloads = JSON.parse(storage!);
28 | 
29 | 				if (Array.isArray(downloads)) {
30 | 					addDownloadHistory(downloads);
31 | 				}
32 | 			}
33 | 		}
34 | 	});
35 | </script>
36 | 
37 | <ModeWatcher />
38 | 
39 | <div class="bg-background">
40 | 	<slot />
41 | </div>
42 | 
43 | <Toaster />
44 | {#if $globalStore.loading}
45 | 	<GlobalLoading />
46 | {/if}
47 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Select as SelectPrimitive } from "bits-ui";
 3 | 	import { scale } from "svelte/transition";
 4 | 	import { cn, flyAndScale } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ContentProps;
 7 | 	type $$Events = SelectPrimitive.ContentEvents;
 8 | 
 9 | 	export let sideOffset: $$Props["sideOffset"] = 4;
10 | 	export let inTransition: $$Props["inTransition"] = flyAndScale;
11 | 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
12 | 	export let outTransition: $$Props["outTransition"] = scale;
13 | 	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
14 | 		start: 0.95,
15 | 		opacity: 0,
16 | 		duration: 50,
17 | 	};
18 | 
19 | 	let className: $$Props["class"] = undefined;
20 | 	export { className as class };
21 | </script>
22 | 
23 | <SelectPrimitive.Content
24 | 	{inTransition}
25 | 	{inTransitionConfig}
26 | 	{outTransition}
27 | 	{outTransitionConfig}
28 | 	{sideOffset}
29 | 	class={cn(
30 | 		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
31 | 		className
32 | 	)}
33 | 	{...$$restProps}
34 | 	on:keydown
35 | >
36 | 	<div class="w-full p-1">
37 | 		<slot />
38 | 	</div>
39 | </SelectPrimitive.Content>
40 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/select/select-item.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Check from "lucide-svelte/icons/check";
 3 | 	import { Select as SelectPrimitive } from "bits-ui";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = SelectPrimitive.ItemProps;
 7 | 	type $$Events = SelectPrimitive.ItemEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"];
11 | 	export let label: $$Props["label"] = undefined;
12 | 	export let disabled: $$Props["disabled"] = undefined;
13 | 	export { className as class };
14 | </script>
15 | 
16 | <SelectPrimitive.Item
17 | 	{value}
18 | 	{disabled}
19 | 	{label}
20 | 	class={cn(
21 | 		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
22 | 		className
23 | 	)}
24 | 	{...$$restProps}
25 | 	on:click
26 | 	on:keydown
27 | 	on:focusin
28 | 	on:focusout
29 | 	on:pointerleave
30 | 	on:pointermove
31 | >
32 | 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
33 | 		<SelectPrimitive.ItemIndicator>
34 | 			<Check class="h-4 w-4" />
35 | 		</SelectPrimitive.ItemIndicator>
36 | 	</span>
37 | 	<slot>
38 | 		{label || value}
39 | 	</slot>
40 | </SelectPrimitive.Item>
41 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/input/input.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { HTMLInputAttributes } from "svelte/elements";
 3 | 	import type { InputEvents } from "./index.js";
 4 | 	import { cn } from "$lib/utils.js";
 5 | 
 6 | 	type $$Props = HTMLInputAttributes;
 7 | 	type $$Events = InputEvents;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let value: $$Props["value"] = undefined;
11 | 	export { className as class };
12 | 
13 | 	// Workaround for https://github.com/sveltejs/svelte/issues/9305
14 | 	// Fixed in Svelte 5, but not backported to 4.x.
15 | 	export let readonly: $$Props["readonly"] = undefined;
16 | </script>
17 | 
18 | <input
19 | 	class={cn(
20 | 		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
21 | 		className
22 | 	)}
23 | 	bind:value
24 | 	{readonly}
25 | 	on:blur
26 | 	on:change
27 | 	on:click
28 | 	on:focus
29 | 	on:focusin
30 | 	on:focusout
31 | 	on:keydown
32 | 	on:keypress
33 | 	on:keyup
34 | 	on:mouseover
35 | 	on:mouseenter
36 | 	on:mouseleave
37 | 	on:mousemove
38 | 	on:paste
39 | 	on:input
40 | 	on:wheel|passive
41 | 	{...$$restProps}
42 | />
43 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/dialog/dialog-content.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Dialog as DialogPrimitive } from "bits-ui";
 3 | 	import X from "lucide-svelte/icons/x";
 4 | 	import * as Dialog from "./index.js";
 5 | 	import { cn, flyAndScale } from "$lib/utils.js";
 6 | 
 7 | 	type $$Props = DialogPrimitive.ContentProps;
 8 | 
 9 | 	let className: $$Props["class"] = undefined;
10 | 	export let transition: $$Props["transition"] = flyAndScale;
11 | 	export let transitionConfig: $$Props["transitionConfig"] = {
12 | 		duration: 200,
13 | 	};
14 | 	export { className as class };
15 | </script>
16 | 
17 | <Dialog.Portal>
18 | 	<Dialog.Overlay />
19 | 	<DialogPrimitive.Content
20 | 		{transition}
21 | 		{transitionConfig}
22 | 		class={cn(
23 | 			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
24 | 			className
25 | 		)}
26 | 		{...$$restProps}
27 | 	>
28 | 		<slot />
29 | 		<DialogPrimitive.Close
30 | 			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
31 | 		>
32 | 			<X class="h-4 w-4" />
33 | 			<span class="sr-only">Close</span>
34 | 		</DialogPrimitive.Close>
35 | 	</DialogPrimitive.Content>
36 | </Dialog.Portal>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "libros",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11 | 		"lint": "prettier --check . && eslint .",
12 | 		"format": "prettier --write ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-auto": "^3.0.0",
16 | 		"@sveltejs/adapter-netlify": "^4.3.4",
17 | 		"@sveltejs/kit": "^2.0.0",
18 | 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
19 | 		"@types/axios": "^0.14.0",
20 | 		"@types/eslint": "^9.6.0",
21 | 		"@types/jsdom": "^21.1.7",
22 | 		"autoprefixer": "^10.4.20",
23 | 		"eslint": "^9.0.0",
24 | 		"eslint-config-prettier": "^9.1.0",
25 | 		"eslint-plugin-svelte": "^2.36.0",
26 | 		"globals": "^15.0.0",
27 | 		"prettier": "^3.1.1",
28 | 		"prettier-plugin-svelte": "^3.1.2",
29 | 		"prettier-plugin-tailwindcss": "^0.6.5",
30 | 		"svelte": "^4.2.7",
31 | 		"svelte-check": "^4.0.0",
32 | 		"tailwindcss": "^3.4.9",
33 | 		"typescript": "^5.0.0",
34 | 		"typescript-eslint": "^8.0.0",
35 | 		"vite": "^5.0.3"
36 | 	},
37 | 	"type": "module",
38 | 	"dependencies": {
39 | 		"@types/node": "^22.7.4",
40 | 		"axios": "^1.7.7",
41 | 		"bits-ui": "^0.21.15",
42 | 		"clsx": "^2.1.1",
43 | 		"fs": "^0.0.1-security",
44 | 		"jsdom": "^25.0.1",
45 | 		"lucide-svelte": "^0.446.0",
46 | 		"mode-watcher": "^0.4.1",
47 | 		"node-fetch": "^2.7.0",
48 | 		"path": "^0.12.7",
49 | 		"stream": "^0.0.3",
50 | 		"svelte-sonner": "^0.3.28",
51 | 		"tailwind-merge": "^2.5.2",
52 | 		"tailwind-variants": "^0.2.1"
53 | 	}
54 | }
55 | 


--------------------------------------------------------------------------------
/src/lib/components/Paginator.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { goto } from '$app/navigation';
 3 | 	import * as Pagination from '$lib/components/ui/pagination';
 4 | 	import { toggleLoading } from '$store/globalStore';
 5 | 
 6 | 	export let totalPages;
 7 | 	export let perPage;
 8 | 	export let currentPage;
 9 | 	export let onPreceed;
10 | 	export let query;
11 | 	export let filterBy;
12 | 
13 | 	const preceedToPage = (pageNumber: number) => {
14 | 		onPreceed();
15 | 		toggleLoading();
16 | 		goto(`/search?query=${query}&filterBy=${filterBy || 'title'}&page=${pageNumber}`);
17 | 		currentPage = pageNumber;
18 | 	};
19 | </script>
20 | 
21 | <Pagination.Root class="my-5    " count={totalPages * 25} perPage={25} let:pages let:currentPage>
22 | 	<Pagination.Content class="flex flex-col items-center   sm:flex-row">
23 | 		<Pagination.Item>
24 | 			{#if currentPage}
25 | 				<Pagination.PrevButton on:click={() => preceedToPage(currentPage - 1)} />
26 | 			{/if}
27 | 		</Pagination.Item>
28 | 		{#each pages as page (page.key)}
29 | 			{#if page.type === 'ellipsis'}
30 | 				<Pagination.Item>
31 | 					<Pagination.Ellipsis />
32 | 				</Pagination.Item>
33 | 			{:else}
34 | 				<Pagination.Item isVisible={currentPage == page.value}>
35 | 					<Pagination.Link
36 | 						on:click={() => preceedToPage(page.value)}
37 | 						{page}
38 | 						isActive={currentPage == page.value}
39 | 					>
40 | 						{page.value}
41 | 					</Pagination.Link>
42 | 				</Pagination.Item>
43 | 			{/if}
44 | 		{/each}
45 | 		<Pagination.Item>
46 | 			{#if currentPage}
47 | 				<Pagination.NextButton on:click={() => preceedToPage(currentPage + 1)} />
48 | 			{/if}
49 | 		</Pagination.Item>
50 | 	</Pagination.Content>
51 | </Pagination.Root>
52 | 


--------------------------------------------------------------------------------
/src/lib/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { type VariantProps, tv } from "tailwind-variants";
 2 | import type { Button as ButtonPrimitive } from "bits-ui";
 3 | import Root from "./button.svelte";
 4 | 
 5 | const buttonVariants = tv({
 6 | 	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 7 | 	variants: {
 8 | 		variant: {
 9 | 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
10 | 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
11 | 			outline:
12 | 				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
13 | 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 | 			ghost: "hover:bg-accent hover:text-accent-foreground",
15 | 			link: "text-primary underline-offset-4 hover:underline",
16 | 		},
17 | 		size: {
18 | 			default: "h-10 px-4 py-2",
19 | 			sm: "h-9 rounded-md px-3",
20 | 			lg: "h-11 rounded-md px-8",
21 | 			icon: "h-10 w-10",
22 | 		},
23 | 	},
24 | 	defaultVariants: {
25 | 		variant: "default",
26 | 		size: "default",
27 | 	},
28 | });
29 | 
30 | type Variant = VariantProps<typeof buttonVariants>["variant"];
31 | type Size = VariantProps<typeof buttonVariants>["size"];
32 | 
33 | type Props = ButtonPrimitive.Props & {
34 | 	variant?: Variant;
35 | 	size?: Size;
36 | };
37 | 
38 | type Events = ButtonPrimitive.Events;
39 | 
40 | export {
41 | 	Root,
42 | 	type Props,
43 | 	type Events,
44 | 	//
45 | 	Root as Button,
46 | 	type Props as ButtonProps,
47 | 	type Events as ButtonEvents,
48 | 	buttonVariants,
49 | };
50 | 


--------------------------------------------------------------------------------
/src/lib/components/SearchBar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { goto } from '$app/navigation';
 3 | 
 4 | 	import { Input } from '$lib/components/ui/input/index';
 5 | 
 6 | 	import { Button } from '$lib/components/ui/button/index.js';
 7 | 	import * as Select from '$lib/components/ui/select';
 8 | 
 9 | 	import { toggleLoading } from '$store/globalStore';
10 | 	import { toast } from 'svelte-sonner';
11 | 
12 | 	let searchQuery = '';
13 | 	let filterBy: string;
14 | 
15 | 	type OnSubmitType = () => void;
16 | 
17 | 	export let onSubmit: OnSubmitType | null = null;
18 | 	const handleSubmit = (e: SubmitEvent) => {
19 | 		e.preventDefault();
20 | 
21 | 		if (onSubmit) {
22 | 			onSubmit();
23 | 		}
24 | 
25 | 		if (!searchQuery || searchQuery.length < 3) {
26 | 			toast('Invalid input ');
27 | 			return;
28 | 		}
29 | 		toggleLoading();
30 | 
31 | 		goto(`/search?query=${searchQuery}&filterBy=${filterBy || 'title'}&page=${1}`, {
32 | 			replaceState: true
33 | 		});
34 | 	};
35 | 
36 | 	let options = ['title', 'author', 'series', 'publisher', 'identifier', 'tags'];
37 | </script>
38 | 
39 | <div class="my-4 flex w-full items-center justify-center">
40 | 	<form class="m-2 flex w-full items-center space-x-2 md:w-1/2" on:submit={handleSubmit}>
41 | 		<Select.Root
42 | 			onSelectedChange={(option) => {
43 | 				filterBy = String(option?.value);
44 | 			}}
45 | 		>
46 | 			<Select.Trigger class="w-[180px]">
47 | 				<Select.Value placeholder="Filter By " />
48 | 			</Select.Trigger>
49 | 			<Select.Content>
50 | 				{#each options as option}
51 | 					<Select.Item value={option}>{option}</Select.Item>
52 | 				{/each}
53 | 			</Select.Content>
54 | 		</Select.Root>
55 | 		<Input bind:value={searchQuery} type="search" placeholder="Search books" />
56 | 		<Button type="submit">Search</Button>
57 | 	</form>
58 | </div>
59 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 | 	:root {
 7 | 		--background: 0 0% 100%;
 8 | 		--foreground: 222.2 84% 4.9%;
 9 | 
10 | 		--muted: 210 40% 96.1%;
11 | 		--muted-foreground: 215.4 16.3% 46.9%;
12 | 
13 | 		--popover: 0 0% 100%;
14 | 		--popover-foreground: 222.2 84% 4.9%;
15 | 
16 | 		--card: 0 0% 100%;
17 | 		--card-foreground: 222.2 84% 4.9%;
18 | 
19 | 		--border: 214.3 31.8% 91.4%;
20 | 		--input: 214.3 31.8% 91.4%;
21 | 
22 | 		--primary: 222.2 47.4% 11.2%;
23 | 		--primary-foreground: 210 40% 98%;
24 | 
25 | 		--secondary: 210 40% 96.1%;
26 | 		--secondary-foreground: 222.2 47.4% 11.2%;
27 | 
28 | 		--accent: 210 40% 96.1%;
29 | 		--accent-foreground: 222.2 47.4% 11.2%;
30 | 
31 | 		--destructive: 0 72.2% 50.6%;
32 | 		--destructive-foreground: 210 40% 98%;
33 | 
34 | 		--ring: 222.2 84% 4.9%;
35 | 
36 | 		--radius: 0.5rem;
37 | 	}
38 | 
39 | 	.dark {
40 | 		--background: 222.2 84% 4.9%;
41 | 		--foreground: 210 40% 98%;
42 | 
43 | 		--muted: 217.2 32.6% 17.5%;
44 | 		--muted-foreground: 215 20.2% 65.1%;
45 | 
46 | 		--popover: 222.2 84% 4.9%;
47 | 		--popover-foreground: 210 40% 98%;
48 | 
49 | 		--card: 222.2 84% 4.9%;
50 | 		--card-foreground: 210 40% 98%;
51 | 
52 | 		--border: 217.2 32.6% 17.5%;
53 | 		--input: 217.2 32.6% 17.5%;
54 | 
55 | 		--primary: 210 40% 98%;
56 | 		--primary-foreground: 222.2 47.4% 11.2%;
57 | 
58 | 		--secondary: 217.2 32.6% 17.5%;
59 | 		--secondary-foreground: 210 40% 98%;
60 | 
61 | 		--accent: 217.2 32.6% 17.5%;
62 | 		--accent-foreground: 210 40% 98%;
63 | 
64 | 		--destructive: 0 62.8% 30.6%;
65 | 		--destructive-foreground: 210 40% 98%;
66 | 
67 | 		--ring: 212.7 26.8% 83.9%;
68 | 	}
69 | }
70 | 
71 | @layer base {
72 | 	* {
73 | 		@apply border-border;
74 | 	}
75 | 	body {
76 | 		@apply bg-background text-foreground;
77 | 	}
78 | }
79 | 


--------------------------------------------------------------------------------
/src/lib/components/DownloadProgress.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Progress } from '$lib/components/ui/progress/index';
 3 | 	import downloadStore from '../../store/downloadStore';
 4 | 	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
 5 | 	import { Badge } from '$lib/components/ui/badge/index';
 6 | </script>
 7 | 
 8 | <div class=" m-4">
 9 | 	{#if $downloadStore.downloads.length < 1}
10 | 		<p>You dont have any downloads so far in this session</p>
11 | 	{:else}
12 | 		<Badge class="my-2 bg-yellow-500 text-primary "
13 | 			>Dont close this browser tab until downloads finish</Badge
14 | 		>
15 | 	{/if}
16 | 	<div class="h-[20rem] overflow-auto">
17 | 		{#each $downloadStore.downloads as download}
18 | 			<div>
19 | 				<p class=" my-2 font-bold">{download.title.replace(/\d{5,}/g, '')}</p>
20 | 				<p class=" my-2 text-slate-400">{download.authors}</p>
21 | 				{#if download.total === 0}
22 | 					<Badge variant="outline">
23 | 						<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
24 | 						Please wait</Badge
25 | 					>
26 | 				{:else if download.total === download.loaded}
27 | 					<Badge>Finished</Badge>
28 | 				{:else}
29 | 					<Progress value={(download.loaded / download.total) * 100} max={100} class="w-full " />
30 | 					<p>
31 | 						{Math.round((download.loaded / (1024 * 1024) + Number.EPSILON) * 100) / 100} mb / {Math.round(
32 | 							(download.total / (1024 * 1024) + Number.EPSILON) * 100
33 | 						) / 100} mb
34 | 					</p>
35 | 				{/if}
36 | 			</div>
37 | 		{/each}
38 | 	</div>
39 | </div>
40 | 
41 | <style>
42 | 	::-webkit-scrollbar {
43 | 		width: 8px; /* Width of the scrollbar */
44 | 	}
45 | 
46 | 	::-webkit-scrollbar-track {
47 | 		background: transparent; /* Background of the scrollbar track */
48 | 	}
49 | 
50 | 	::-webkit-scrollbar-thumb {
51 | 		background: #888; /* Color of the scrollbar thumb */
52 | 		border-radius: 10px; /* Rounded corners for the thumb */
53 | 	}
54 | 
55 | 	::-webkit-scrollbar-thumb:hover {
56 | 		background: #555; /* Darker color on hover */
57 | 	}
58 | </style>
59 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import { fontFamily } from 'tailwindcss/defaultTheme';
 2 | import type { Config } from 'tailwindcss';
 3 | 
 4 | const config: Config = {
 5 | 	darkMode: ['class'],
 6 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
 7 | 	safelist: ['dark'],
 8 | 	theme: {
 9 | 		container: {
10 | 			center: true,
11 | 			padding: '2rem',
12 | 			screens: {
13 | 				'2xl': '1400px'
14 | 			}
15 | 		},
16 | 		extend: {
17 | 			colors: {
18 | 				'primary-dark': '#2E2532',
19 | 				'primary-white': '#FBFBFB',
20 | 				border: 'hsl(var(--border) / <alpha-value>)',
21 | 				input: 'hsl(var(--input) / <alpha-value>)',
22 | 				ring: 'hsl(var(--ring) / <alpha-value>)',
23 | 				background: 'hsl(var(--background) / <alpha-value>)',
24 | 				foreground: 'hsl(var(--foreground) / <alpha-value>)',
25 | 				primary: {
26 | 					DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
27 | 					foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
28 | 				},
29 | 				secondary: {
30 | 					DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
31 | 					foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
32 | 				},
33 | 				destructive: {
34 | 					DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
35 | 					foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
36 | 				},
37 | 				muted: {
38 | 					DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
39 | 					foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
40 | 				},
41 | 				accent: {
42 | 					DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
43 | 					foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
44 | 				},
45 | 				popover: {
46 | 					DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
47 | 					foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
48 | 				},
49 | 				card: {
50 | 					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
51 | 					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
52 | 				}
53 | 			},
54 | 			borderRadius: {
55 | 				lg: 'var(--radius)',
56 | 				md: 'calc(var(--radius) - 2px)',
57 | 				sm: 'calc(var(--radius) - 4px)'
58 | 			},
59 | 			fontFamily: {
60 | 				sans: [...fontFamily.sans]
61 | 			}
62 | 		}
63 | 	}
64 | };
65 | 
66 | export default config;
67 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from 'clsx';
 2 | import { twMerge } from 'tailwind-merge';
 3 | import { cubicOut } from 'svelte/easing';
 4 | import type { TransitionConfig } from 'svelte/transition';
 5 | import type Book from './types/Book';
 6 | import type { BookDownload } from './types/Book';
 7 | import { DOWNLOAD_HISTORY } from './constants';
 8 | 
 9 | export function cn(...inputs: ClassValue[]) {
10 | 	return twMerge(clsx(inputs));
11 | }
12 | 
13 | type FlyAndScaleParams = {
14 | 	y?: number;
15 | 	x?: number;
16 | 	start?: number;
17 | 	duration?: number;
18 | };
19 | 
20 | export const flyAndScale = (
21 | 	node: Element,
22 | 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
23 | ): TransitionConfig => {
24 | 	const style = getComputedStyle(node);
25 | 	const transform = style.transform === 'none' ? '' : style.transform;
26 | 
27 | 	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
28 | 		const [minA, maxA] = scaleA;
29 | 		const [minB, maxB] = scaleB;
30 | 
31 | 		const percentage = (valueA - minA) / (maxA - minA);
32 | 		const valueB = percentage * (maxB - minB) + minB;
33 | 
34 | 		return valueB;
35 | 	};
36 | 
37 | 	const styleToString = (style: Record<string, number | string | undefined>): string => {
38 | 		return Object.keys(style).reduce((str, key) => {
39 | 			if (style[key] === undefined) return str;
40 | 			return str + `${key}:${style[key]};`;
41 | 		}, '');
42 | 	};
43 | 
44 | 	return {
45 | 		duration: params.duration ?? 200,
46 | 		delay: 0,
47 | 		css: (t) => {
48 | 			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
49 | 			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
50 | 			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
51 | 
52 | 			return styleToString({
53 | 				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
54 | 				opacity: t
55 | 			});
56 | 		},
57 | 		easing: cubicOut
58 | 	};
59 | };
60 | 
61 | export const downloadBlob = (blob: Blob, downloadedBook: BookDownload) => {
62 | 	const { title, extension } = downloadedBook;
63 | 	const url = window.URL.createObjectURL(blob);
64 | 	const a = document.createElement('a');
65 | 	a.style.display = 'none';
66 | 	a.href = url;
67 | 	a.download = `${title}.${extension}`; // Specify the filename
68 | 	document.body.appendChild(a);
69 | 	a.click();
70 | 	window.URL.revokeObjectURL(url); // Clean up
71 | 
72 | 	let prevStorage = localStorage.getItem(DOWNLOAD_HISTORY);
73 | 	let downloads: Book[] = [];
74 | 
75 | 	if (prevStorage !== '' && prevStorage !== null) {
76 | 		downloads = JSON.parse(prevStorage);
77 | 	}
78 | 
79 | 	downloads.push(downloadedBook);
80 | 	localStorage.setItem(DOWNLOAD_HISTORY, JSON.stringify(downloads));
81 | };
82 | 


--------------------------------------------------------------------------------
/src/routes/search/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	// svelte core
  3 | 	import { onMount } from 'svelte';
  4 | 	import { goto } from '$app/navigation';
  5 | 
  6 | 	// third party
  7 | 	import { ChevronLeft } from 'lucide-svelte';
  8 | 
  9 | 	// shadcdn components
 10 | 	import Button from '$lib/components/ui/button/button.svelte';
 11 | 	import Badge from '$lib/components/ui/badge/badge.svelte';
 12 | 	import * as Dialog from '$lib/components/ui/dialog';
 13 | 	import * as Pagination from '$lib/components/ui/pagination';
 14 | 
 15 | 	// custom components
 16 | 	import SearchBar from '$lib/components/SearchBar.svelte';
 17 | 	import DownloadProgress from '$lib/components/DownloadProgress.svelte';
 18 | 	import BookUI from '$lib/components/BookUI.svelte';
 19 | 
 20 | 	// custom types
 21 | 	import type Book from '$lib/types/Book';
 22 | 
 23 | 	// stores
 24 | 	import downloadStore from '$store/downloadStore';
 25 | 	import globalStore, { toggleLoading } from '../../store/globalStore';
 26 | 	import BookSkeleton from '$lib/components/BookSkeleton.svelte';
 27 | 	import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
 28 | 	import { toast } from 'svelte-sonner';
 29 | 	import Paginator from '$lib/components/Paginator.svelte';
 30 | 
 31 | 	export let data;
 32 | 
 33 | 	// state
 34 | 	let searchResults: Book[];
 35 | 	let query = '';
 36 | 	let totalPages: number;
 37 | 	let currentPage: number;
 38 | 	let filterBy: string;
 39 | 	let error: string;
 40 | 	$: {
 41 | 		if (data) {
 42 | 			searchResults = data.searchResults;
 43 | 			query = data.query || '';
 44 | 			filterBy = data.filterBy!;
 45 | 			totalPages = data.totalPages || 0;
 46 | 			currentPage = parseInt(data.currentPage || '') || 1;
 47 | 			if (data.error) {
 48 | 				error = data.error;
 49 | 				toast(error);
 50 | 			}
 51 | 			// this is usefull to stop loading after searching on the search page itself
 52 | 			// which is here
 53 | 			toggleLoading(false);
 54 | 		}
 55 | 	}
 56 | 
 57 | 	onMount(() => {
 58 | 		toggleLoading(false);
 59 | 	});
 60 | </script>
 61 | 
 62 | <div class=" h-full w-full p-5 lg:px-[5rem]">
 63 | 	<div class=" flex items-center justify-between">
 64 | 		<div class="flex items-center">
 65 | 			<a href="/"
 66 | 				><Button variant="outline" size="icon">
 67 | 					<ChevronLeft class="h-4 w-4" />
 68 | 				</Button></a
 69 | 			>
 70 | 			<ThemeSwitch className="mx-3" />
 71 | 		</div>
 72 | 
 73 | 		<p class=" my-3 flex items-center text-lg">
 74 | 			<span class=" mx-4">Search results for</span>
 75 | 			<Badge>{query}</Badge>
 76 | 		</p>
 77 | 	</div>
 78 | 	<SearchBar onSubmit={() => (searchResults = [])} />
 79 | 	{#if searchResults.length == 0 && !$globalStore.loading}
 80 | 		<div class=" h-full w-full">
 81 | 			<p class=" m-4 text-center text-3xl">Looks like we got no books for this search</p>
 82 | 		</div>
 83 | 	{/if}
 84 | 	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
 85 | 		{#each searchResults as book, i (i)}
 86 | 			<BookUI {book} />
 87 | 		{/each}
 88 | 
 89 | 		{#if $globalStore.loading && searchResults.length < 1}
 90 | 			<BookSkeleton />
 91 | 			<BookSkeleton />
 92 | 			<BookSkeleton />
 93 | 			<BookSkeleton />
 94 | 			<BookSkeleton />
 95 | 			<BookSkeleton />
 96 | 		{/if}
 97 | 	</div>
 98 | 	<div class=" ">
 99 | 		{#if totalPages && searchResults}
100 | 			<Paginator
101 | 				{totalPages}
102 | 				{currentPage}
103 | 				perPage={25}
104 | 				{query}
105 | 				{filterBy}
106 | 				onPreceed={() => (searchResults = [])}
107 | 			/>
108 | 		{/if}
109 | 	</div>
110 | </div>
111 | 
112 | <Dialog.Root>
113 | 	<Dialog.Trigger class="w-full" on:click={() => {}}>
114 | 		<Button class="fixed bottom-5 right-5">Downloads ( {$downloadStore.downloads.length} )</Button>
115 | 	</Dialog.Trigger>
116 | 	<Dialog.Content>
117 | 		<DownloadProgress />
118 | 	</Dialog.Content>
119 | </Dialog.Root>
120 | 


--------------------------------------------------------------------------------
/src/lib/components/BookUI.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	// shadcdn components
  3 | 	import type Book from '$lib/types/Book';
  4 | 	import Button from './ui/button/button.svelte';
  5 | 	import * as Dialog from '$lib/components/ui/dialog';
  6 | 
  7 | 	// third-party
  8 | 	import { CalendarDays } from 'lucide-svelte';
  9 | 	import axios, { type AxiosProgressEvent } from 'axios';
 10 | 	import { toast } from 'svelte-sonner';
 11 | 
 12 | 	//custom components
 13 | 	import DownloadProgress from './DownloadProgress.svelte';
 14 | 
 15 | 	// misc
 16 | 	import { API_SERVER_URL, NOT_AVAILABLE } from '$lib/constants';
 17 | 	import { downloadBlob } from '$lib/utils';
 18 | 
 19 | 	// stores
 20 | 	import downloadStore, { addDownload, updateDownloadStatus } from '../../store/downloadStore';
 21 | 	import { onMount } from 'svelte';
 22 | 
 23 | 	export let book: Book;
 24 | 
 25 | 	const handleDownload = async (book: Book) => {
 26 | 		console.log("boooooook",book)
 27 | 		const m = book.mirror.match(/[?&]md5=([a-fA-F0-9]{32})\b/);
 28 | 		const md5 = m ? m[1] : null;
 29 | 		try {
 30 | 			addDownload(book);
 31 | 			console.log('selected book', book);
 32 | 			const res = await axios.get(`${API_SERVER_URL}/books/dwn?md5=${md5}`, {
 33 | 				responseType: 'blob', // Set response type to blob
 34 | 				onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
 35 | 					// this function gets called everytime the file gets updated with a new stream
 36 | 					const total = progressEvent.total;
 37 | 					const loaded = progressEvent.loaded;
 38 | 
 39 | 					updateDownloadStatus(book, loaded, total || 0);
 40 | 				}
 41 | 			});
 42 | 
 43 | 			if (res) {
 44 | 				let blob = res.data;
 45 | 				toast('Book downloaded successfully :)');
 46 | 				downloadBlob(blob, $downloadStore.downloads.filter((b) => b.id === book.id)[0]);
 47 | 			}
 48 | 		} catch (error) {
 49 | 			console.log(error);
 50 | 		}
 51 | 	};
 52 | 
 53 | 	function delay(ms: number) {
 54 | 		return new Promise((resolve) => setTimeout(resolve, ms));
 55 | 	}
 56 | 
 57 | 	// Optional: random delay between 200ms and 2000ms
 58 | 	function randomDelay(min = 200, max = 2000) {
 59 | 		return Math.floor(Math.random() * (max - min + 1)) + min;
 60 | 	}
 61 | 
 62 | 	onMount(() => {
 63 | 		const fetchThumbUrl = async () => {
 64 | 			if (book.mirror) {
 65 | 				// Wait for a random amount of time
 66 | 				await delay(randomDelay(300, 4000));
 67 | /* 
 68 | 				try {
 69 | 					const res = await axios.get(`${API_SERVER_URL}/books/thumb?mirror=${book.mirror}`);
 70 | 					console.log(res);
 71 | 					if (res.data) {
 72 | 						book.thumbUrl = res.data.url;
 73 | 					}
 74 | 				} catch (error) {
 75 | 					console.log(`for book ${book.title} Error fetching thumbnail URL:`, error);
 76 | 				} */
 77 | 			}
 78 | 		};
 79 | 
 80 | 		fetchThumbUrl();
 81 | 	});
 82 | </script>
 83 | 
 84 | <div
 85 | 	class="  relative flex flex-col rounded-xl bg-background bg-clip-border text-gray-700 shadow-lg outline outline-1"
 86 | >
 87 | 	<div class="relative mx-4 mt-4 text-gray-700">
 88 | 		<img
 89 | 			class=" h-[300px] w-full rounded-xl object-cover"
 90 | 			src={book.thumbUrl ? `${API_SERVER_URL}/proxy?url=${book.thumbUrl}` : "/no_cover.png"}
 91 | 			alt=""
 92 | 		/>
 93 | 	</div>
 94 | 	<div class="  p-6 md:h-52">
 95 | 		<div class="mb-2 flex items-center justify-between">
 96 | 			<p class=" block font-sans text-base font-bold leading-relaxed text-primary antialiased">
 97 | 				{book.title.replace(/\d{5,}/g, '').slice(0, 100)}
 98 | 				{book.title.replace(/\d{5,}/g, '').length > 100 ? '....' : ''}
 99 | 			</p>
100 | 		</div>
101 | 
102 | 		<div>
103 | 			<p class="  text-slate-500">
104 | 				<span class=" font-bold">Authors :</span>
105 | 
106 | 				{#if book.authors.length}
107 | 					<small
108 | 						>{book.authors.length > 100
109 | 							? `${book.authors.slice(0, 100)} ....`
110 | 							: book.authors}</small
111 | 					>
112 | 				{:else}
113 | 					<small>{book.authors.length && NOT_AVAILABLE}</small>
114 | 				{/if}
115 | 			</p>
116 | 			<p class="flex items-center">
117 | 				<CalendarDays size={20} /> <span class=" mx-1">{book.year || NOT_AVAILABLE}</span>
118 | 			</p>
119 | 		</div>
120 | 	</div>
121 | 	<div class="p-6 pt-0">
122 | 		<Dialog.Root>
123 | 			<Dialog.Trigger class="w-full" on:click={() => handleDownload(book)}
124 | 				><Button class=" w-full ">Download {book.extension.toUpperCase()} ( {book.size} )</Button
125 | 				></Dialog.Trigger
126 | 			>
127 | 			<Dialog.Content>
128 | 				<DownloadProgress />
129 | 			</Dialog.Content>
130 | 		</Dialog.Root>
131 | 	</div>
132 | </div>
133 | 


--------------------------------------------------------------------------------