-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5f58628
commit 123050b
Showing
16 changed files
with
377 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<script lang="ts"> | ||
import * as Card from "$lib/components/ui/card"; | ||
import {Input} from "$lib/components/ui/input"; | ||
import {Button} from "$lib/components/ui/button"; | ||
import {Book, Bookmark, Eye} from "lucide-svelte"; | ||
import {slide} from "svelte/transition"; | ||
let searchResults: any[] = []; | ||
let showSearchResults = false; | ||
let inputValue = ''; | ||
async function getSearchedManga(query: string) { | ||
if (query.length < 3 ) return; | ||
const response = await fetch(`/api/search?query=${query}`); | ||
if (response.ok) { | ||
showSearchResults = true; | ||
searchResults = (await response.json()).results | ||
} | ||
} | ||
$: if (inputValue.length > 2) { | ||
getSearchedManga(inputValue) | ||
} else if (inputValue.length === 0) { | ||
showSearchResults = false | ||
} | ||
$: console.log(inputValue) | ||
</script> | ||
|
||
<div class="w-full relative space-y-3"> | ||
<Input type="search" placeholder="Search Manga..." bind:value={inputValue}/> | ||
{#if showSearchResults} | ||
<div transition:slide={{axis: 'y'}} > | ||
<Card.Root class="px-2 py-4 space-y-4 z-10 absolute h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-primary scrollbar-track-rounded-lg scrollbar-track-accent"> | ||
{#if searchResults.length } | ||
{#each searchResults as manga} | ||
<Button href="/manga/{manga.id}/{manga.slug}" variant="outline" class="flex w-full h-15 px-2 items-start justify-start space-x-5"> | ||
<img class="w-14 rounded" src="/images?type=covers_optimized_home_main&id=manga_{manga.id}&slug={manga.cover}" alt=""> | ||
<div class="grid grid-cols-1 gap-y-4"> | ||
<h3 class="text-lg font-semibold tracking-tight truncate"> {manga.title.trim()} </h3> | ||
<div class="flex items-center space-x-5"> | ||
<div class="flex items-center gap-x-2"> | ||
<Book class="w-4 h-4" /> {manga['chapters_count']} | ||
</div> | ||
<div class="flex items-center gap-x-2"> | ||
<Eye class="w-4 h-4" /> {manga['views_count']} | ||
</div> | ||
<div class="flex items-center gap-x-2"> | ||
<Bookmark class="w-4 h-4" /> {manga['bookmarks_count']} | ||
</div> | ||
</div> | ||
</div> | ||
</Button> | ||
{/each} | ||
{/if} | ||
</Card.Root> | ||
</div> | ||
{/if} | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
import { Check } from "lucide-svelte"; | ||
type $$Props = DropdownMenuPrimitive.CheckboxItemProps; | ||
type $$Events = DropdownMenuPrimitive.CheckboxItemEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let checked: $$Props["checked"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.CheckboxItem | ||
bind:checked | ||
class={cn( | ||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
className | ||
)} | ||
{...$$restProps} | ||
on:click | ||
on:keydown | ||
on:focusin | ||
on:focusout | ||
on:pointerdown | ||
on:pointerleave | ||
on:pointermove | ||
> | ||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
<DropdownMenuPrimitive.CheckboxIndicator> | ||
<Check class="h-4 w-4" /> | ||
</DropdownMenuPrimitive.CheckboxIndicator> | ||
</span> | ||
<slot /> | ||
</DropdownMenuPrimitive.CheckboxItem> |
25 changes: 25 additions & 0 deletions
25
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn, flyAndScale } from "$lib/utils"; | ||
type $$Props = DropdownMenuPrimitive.ContentProps; | ||
type $$Events = DropdownMenuPrimitive.ContentEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let transition: $$Props["transition"] = flyAndScale; | ||
export let transitionConfig: $$Props["transitionConfig"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.Content | ||
{transition} | ||
{transitionConfig} | ||
class={cn( | ||
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none", | ||
className | ||
)} | ||
{...$$restProps} | ||
on:keydown | ||
> | ||
<slot /> | ||
</DropdownMenuPrimitive.Content> |
31 changes: 31 additions & 0 deletions
31
src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
type $$Props = DropdownMenuPrimitive.ItemProps & { | ||
inset?: boolean; | ||
}; | ||
type $$Events = DropdownMenuPrimitive.ItemEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let inset: $$Props["inset"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.Item | ||
class={cn( | ||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
inset && "pl-8", | ||
className | ||
)} | ||
{...$$restProps} | ||
on:click | ||
on:keydown | ||
on:focusin | ||
on:focusout | ||
on:pointerdown | ||
on:pointerleave | ||
on:pointermove | ||
> | ||
<slot /> | ||
</DropdownMenuPrimitive.Item> |
19 changes: 19 additions & 0 deletions
19
src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
type $$Props = DropdownMenuPrimitive.LabelProps & { | ||
inset?: boolean; | ||
}; | ||
let className: $$Props["class"] = undefined; | ||
export let inset: $$Props["inset"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.Label | ||
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} | ||
{...$$restProps} | ||
> | ||
<slot /> | ||
</DropdownMenuPrimitive.Label> |
11 changes: 11 additions & 0 deletions
11
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
type $$Props = DropdownMenuPrimitive.RadioGroupProps; | ||
export let value: $$Props["value"] = undefined; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value> | ||
<slot /> | ||
</DropdownMenuPrimitive.RadioGroup> |
35 changes: 35 additions & 0 deletions
35
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
import { Circle } from "lucide-svelte"; | ||
type $$Props = DropdownMenuPrimitive.RadioItemProps; | ||
type $$Events = DropdownMenuPrimitive.RadioItemEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let value: $$Props["value"]; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.RadioItem | ||
class={cn( | ||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", | ||
className | ||
)} | ||
{value} | ||
{...$$restProps} | ||
on:click | ||
on:keydown | ||
on:focusin | ||
on:focusout | ||
on:pointerdown | ||
on:pointerleave | ||
on:pointermove | ||
> | ||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
<DropdownMenuPrimitive.RadioIndicator> | ||
<Circle class="h-2 w-2 fill-current" /> | ||
</DropdownMenuPrimitive.RadioIndicator> | ||
</span> | ||
<slot /> | ||
</DropdownMenuPrimitive.RadioItem> |
14 changes: 14 additions & 0 deletions
14
src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
type $$Props = DropdownMenuPrimitive.SeparatorProps; | ||
let className: $$Props["class"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.Separator | ||
class={cn("-mx-1 my-1 h-px bg-muted", className)} | ||
{...$$restProps} | ||
/> |
16 changes: 16 additions & 0 deletions
16
src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<script lang="ts"> | ||
import { cn } from "$lib/utils"; | ||
import type { HTMLAttributes } from "svelte/elements"; | ||
type $$Props = HTMLAttributes<HTMLSpanElement>; | ||
let className: $$Props["class"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<span | ||
class={cn("ml-auto text-xs tracking-widest opacity-60", className)} | ||
{...$$restProps} | ||
> | ||
<slot /> | ||
</span> |
30 changes: 30 additions & 0 deletions
30
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn, flyAndScale } from "$lib/utils"; | ||
type $$Props = DropdownMenuPrimitive.SubContentProps; | ||
type $$Events = DropdownMenuPrimitive.SubContentEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let transition: $$Props["transition"] = flyAndScale; | ||
export let transitionConfig: $$Props["transitionConfig"] = { | ||
x: -10, | ||
y: 0 | ||
}; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.SubContent | ||
{transition} | ||
{transitionConfig} | ||
class={cn( | ||
"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none", | ||
className | ||
)} | ||
{...$$restProps} | ||
on:keydown | ||
on:focusout | ||
on:pointermove | ||
> | ||
<slot /> | ||
</DropdownMenuPrimitive.SubContent> |
32 changes: 32 additions & 0 deletions
32
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<script lang="ts"> | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import { cn } from "$lib/utils"; | ||
import { ChevronRight } from "lucide-svelte"; | ||
type $$Props = DropdownMenuPrimitive.SubTriggerProps & { | ||
inset?: boolean; | ||
}; | ||
type $$Events = DropdownMenuPrimitive.SubTriggerEvents; | ||
let className: $$Props["class"] = undefined; | ||
export let inset: $$Props["inset"] = undefined; | ||
export { className as class }; | ||
</script> | ||
|
||
<DropdownMenuPrimitive.SubTrigger | ||
class={cn( | ||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent", | ||
inset && "pl-8", | ||
className | ||
)} | ||
{...$$restProps} | ||
on:click | ||
on:keydown | ||
on:focusin | ||
on:focusout | ||
on:pointerleave | ||
on:pointermove | ||
> | ||
<slot /> | ||
<ChevronRight class="ml-auto h-4 w-4" /> | ||
</DropdownMenuPrimitive.SubTrigger> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; | ||
import Item from "./dropdown-menu-item.svelte"; | ||
import Label from "./dropdown-menu-label.svelte"; | ||
import Content from "./dropdown-menu-content.svelte"; | ||
import Shortcut from "./dropdown-menu-shortcut.svelte"; | ||
import RadioItem from "./dropdown-menu-radio-item.svelte"; | ||
import Separator from "./dropdown-menu-separator.svelte"; | ||
import RadioGroup from "./dropdown-menu-radio-group.svelte"; | ||
import SubContent from "./dropdown-menu-sub-content.svelte"; | ||
import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; | ||
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; | ||
|
||
const Sub = DropdownMenuPrimitive.Sub; | ||
const Root = DropdownMenuPrimitive.Root; | ||
const Trigger = DropdownMenuPrimitive.Trigger; | ||
const Group = DropdownMenuPrimitive.Group; | ||
|
||
export { | ||
Sub, | ||
Root, | ||
Item, | ||
Label, | ||
Group, | ||
Trigger, | ||
Content, | ||
Shortcut, | ||
Separator, | ||
RadioItem, | ||
SubContent, | ||
SubTrigger, | ||
RadioGroup, | ||
CheckboxItem, | ||
// | ||
Root as DropdownMenu, | ||
Sub as DropdownMenuSub, | ||
Item as DropdownMenuItem, | ||
Label as DropdownMenuLabel, | ||
Group as DropdownMenuGroup, | ||
Content as DropdownMenuContent, | ||
Trigger as DropdownMenuTrigger, | ||
Shortcut as DropdownMenuShortcut, | ||
RadioItem as DropdownMenuRadioItem, | ||
Separator as DropdownMenuSeparator, | ||
RadioGroup as DropdownMenuRadioGroup, | ||
SubContent as DropdownMenuSubContent, | ||
SubTrigger as DropdownMenuSubTrigger, | ||
CheckboxItem as DropdownMenuCheckboxItem | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import type {RequestHandler} from "@sveltejs/kit"; | ||
import {json} from "@sveltejs/kit"; | ||
import {extendedFetch} from "$lib/server/utils"; | ||
|
||
export const GET: RequestHandler = async ({url}) => { | ||
const term = url.searchParams.get('query'); | ||
if (term && term.length > 2) { | ||
const responseData = await extendedFetch( `/search?term=${term}` ); | ||
|
||
if (responseData) { | ||
return json({ | ||
results: responseData.data | ||
}) | ||
} | ||
} | ||
return json({ | ||
results: [] | ||
}) | ||
}; |
Oops, something went wrong.