92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import type { Providers } from '@onelauncher/client/bindings';
|
|
import { ChevronRightIcon } from '@untitled-theme/icons-solid';
|
|
import OneConfigLogo from '~assets/logos/oneconfig.svg?component-solid';
|
|
import Button from '~ui/components/base/Button';
|
|
import SearchResultsContainer from '~ui/components/content/SearchResults';
|
|
import Spinner from '~ui/components/Spinner';
|
|
import useBrowser from '~ui/hooks/useBrowser';
|
|
import { createMemo, For, onMount, Show } from 'solid-js';
|
|
import { BrowserContent } from './BrowserRoot';
|
|
|
|
function BrowserMain() {
|
|
const browser = useBrowser();
|
|
|
|
onMount(() => {
|
|
browser.setSearchQuery(prev => ({
|
|
...prev,
|
|
categories: [],
|
|
}));
|
|
});
|
|
|
|
return (
|
|
<BrowserContent>
|
|
<div class="flex flex-col gap-8">
|
|
<Featured />
|
|
|
|
<Spinner.Suspense>
|
|
<Show when={browser.popularPackages() !== undefined}>
|
|
<For each={Object.entries(browser.popularPackages()!)}>
|
|
{([provider, results]) => (
|
|
<SearchResultsContainer
|
|
collapsable
|
|
header={provider}
|
|
provider={provider as Providers}
|
|
results={results}
|
|
/>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</Spinner.Suspense>
|
|
</div>
|
|
</BrowserContent>
|
|
);
|
|
}
|
|
|
|
function Featured() {
|
|
const browser = useBrowser();
|
|
|
|
const featured = createMemo(() => browser.featuredPackage()?.[0]);
|
|
|
|
const open = () => {
|
|
const pkg = featured();
|
|
if (!pkg)
|
|
return;
|
|
browser.displayPackage(pkg.id, pkg.provider);
|
|
};
|
|
|
|
return (
|
|
<Show when={featured()}>
|
|
<div class="flex flex-col gap-y-1">
|
|
<h5 class="ml-2">Featured</h5>
|
|
<div class="w-full flex flex-row overflow-hidden rounded-lg bg-page-elevated">
|
|
<div class="w-full p-1">
|
|
<img alt={`${featured()?.title} thumbnail`} class="aspect-ratio-video h-full w-full rounded-md object-cover object-center" src={featured()?.thumbnail} />
|
|
</div>
|
|
<div class="max-w-84 min-w-52 flex flex-col gap-y-1 p-4">
|
|
<h2>{featured()?.title}</h2>
|
|
|
|
<Show when={featured()?.oneconfig}>
|
|
<div class="w-fit flex flex-row items-center gap-x-1 rounded-lg bg-border/10 px-1.5 py-1 text-fg-primary transition hover:opacity-80">
|
|
<OneConfigLogo class="h-3.5 w-3.5" />
|
|
<span class="text-sm font-medium">OneConfig Integrated</span>
|
|
</div>
|
|
</Show>
|
|
|
|
<p class="mt-1 flex-1 leading-normal">{featured()?.description}</p>
|
|
|
|
<div class="flex flex-row justify-end">
|
|
<Button
|
|
buttonStyle="ghost"
|
|
children="View Package"
|
|
iconRight={<ChevronRightIcon />}
|
|
onClick={open}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
);
|
|
}
|
|
|
|
export default BrowserMain;
|