Ilia Mashkov
109 lines
3.3 KiB
Svelte
109 lines
3.3 KiB
Svelte
<!--
|
|
Component: Page
|
|
Description: The main page component of the application.
|
|
-->
|
|
<script lang="ts">
|
|
import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import {
|
|
Logo,
|
|
Section,
|
|
} from '$shared/ui';
|
|
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
|
|
import { FontSearch } from '$widgets/FontSearch';
|
|
import { SampleList } from '$widgets/SampleList';
|
|
import CodeIcon from '@lucide/svelte/icons/code';
|
|
import EyeIcon from '@lucide/svelte/icons/eye';
|
|
import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
|
|
import ScanSearchIcon from '@lucide/svelte/icons/search';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let searchContainer: HTMLElement;
|
|
|
|
let isExpanded = $state(false);
|
|
|
|
function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippet<[{ className?: string }]>) {
|
|
if (isPast && title) {
|
|
scrollBreadcrumbsStore.add({ index, title });
|
|
} else {
|
|
scrollBreadcrumbsStore.remove(index);
|
|
}
|
|
|
|
return () => {
|
|
scrollBreadcrumbsStore.remove(index);
|
|
};
|
|
}
|
|
|
|
// $effect(() => {
|
|
// appliedFontsManager.touch(
|
|
// selectedFontsStore.all.map(font => ({
|
|
// slug: font.id,
|
|
// weight: controlManager.weight,
|
|
// })),
|
|
// );
|
|
// });
|
|
</script>
|
|
|
|
<!-- Font List -->
|
|
<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
|
|
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
|
|
{#snippet icon({ className })}
|
|
<CodeIcon class={className} />
|
|
{/snippet}
|
|
{#snippet description({ className })}
|
|
<span class={className}>
|
|
Project_Codename
|
|
</span>
|
|
{/snippet}
|
|
<Logo />
|
|
</Section>
|
|
|
|
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
|
|
{#snippet icon({ className })}
|
|
<EyeIcon class={className} />
|
|
{/snippet}
|
|
{#snippet title({ className })}
|
|
<h1 class={className}>
|
|
Optical<br />Comparator
|
|
</h1>
|
|
{/snippet}
|
|
<ComparisonSlider />
|
|
</Section>
|
|
|
|
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
|
|
{#snippet icon({ className })}
|
|
<ScanSearchIcon class={className} />
|
|
{/snippet}
|
|
{#snippet title({ className })}
|
|
<h2 class={className}>
|
|
Query<br />Module
|
|
</h2>
|
|
{/snippet}
|
|
<FontSearch bind:showFilters={isExpanded} />
|
|
</Section>
|
|
|
|
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
|
|
{#snippet icon({ className })}
|
|
<LineSquiggleIcon class={className} />
|
|
{/snippet}
|
|
{#snippet title({ className })}
|
|
<h2 class={className}>
|
|
Sample<br />Set
|
|
</h2>
|
|
{/snippet}
|
|
<SampleList />
|
|
</Section>
|
|
</div>
|
|
|
|
<style>
|
|
.content {
|
|
/* Tells the browser to skip rendering off-screen content */
|
|
content-visibility: auto;
|
|
/* Helps the browser reserve space without calculating everything */
|
|
contain-intrinsic-size: 1px 1000px;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
</style>
|