mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
Merge pull request #42 from teaxyz/search-packages-component
Search Packages Page
This commit is contained in:
Neil
GitHub
commit
6cf00b00c9
20 changed files with 504 additions and 217 deletions
|
|
@ -41,7 +41,8 @@
|
|||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"buffer": "^6.0.3"
|
||||
"buffer": "^6.0.3",
|
||||
"fuse.js": "^6.6.2"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "gui",
|
||||
"width": 800,
|
||||
"width": 1024,
|
||||
"decorations": false
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@
|
|||
</script>
|
||||
|
||||
<Placeholder label="FeaturedCourses" />
|
||||
<h1>test</h1>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { page } from '$app/stores';
|
||||
import { open } from '@tauri-apps/api/shell';
|
||||
import { appWindow } from '@tauri-apps/api/window';
|
||||
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
|
||||
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
|
|
@ -53,6 +54,10 @@
|
|||
routes[0].active = false;
|
||||
}
|
||||
});
|
||||
|
||||
const onSearch = (term: string) => {
|
||||
console.log('navbar search:', term);
|
||||
};
|
||||
</script>
|
||||
|
||||
<ul id="NavBar">
|
||||
|
|
@ -73,11 +78,7 @@
|
|||
</a>
|
||||
</nav>
|
||||
|
||||
<input
|
||||
class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
|
||||
type="search"
|
||||
placeholder="search"
|
||||
/>
|
||||
<SearchInput size="small" {onSearch} />
|
||||
|
||||
{#each routes as route}
|
||||
<li class={route.active ? 'nav_button active' : 'nav_button'}>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export let label = '';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<section class="p-8 bg-gray">
|
||||
<header>{label}</header>
|
||||
<slot />
|
||||
</section>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: #ccc;
|
||||
/* background-color: #ccc; */
|
||||
display: flex;
|
||||
}
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
<script type="ts">
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
|
||||
import Fuse from 'fuse.js';
|
||||
import { packages as packagesStore, initializePackages } from '$libs/stores';
|
||||
import type { Package } from '$libs/types';
|
||||
|
||||
import type { Package } from '@tea/ui/types';
|
||||
import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
|
||||
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let allPackages: Package[] = [];
|
||||
let packagesIndex: Fuse<Package>;
|
||||
let packages: Package[] = [];
|
||||
let initialized = false;
|
||||
const searchLimit = 5;
|
||||
|
||||
packagesStore.subscribe((v) => {
|
||||
packages = v;
|
||||
allPackages = v;
|
||||
packages = allPackages;
|
||||
packagesIndex = new Fuse(allPackages, {
|
||||
keys: ['name', 'full_name', 'desc']
|
||||
});
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
|
|
@ -18,18 +28,34 @@
|
|||
initializePackages();
|
||||
}
|
||||
});
|
||||
|
||||
const onSearch = (term: string) => {
|
||||
if (term !== '' && term.length > 3) {
|
||||
const res = packagesIndex.search(term);
|
||||
packages = [];
|
||||
for (let i = 0; i < searchLimit; i++) {
|
||||
if (res[i]) {
|
||||
packages.push(res[i].item);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
packages = allPackages;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="bg-black border border-gray">
|
||||
<section class="flex">
|
||||
<h2>Filter Packages</h2>
|
||||
<input type="search" class="text-white bg-black border border-gray" />
|
||||
<section class="flex justify-between items-center">
|
||||
<div>
|
||||
<SearchInput size="medium" {onSearch} />
|
||||
</div>
|
||||
<div class="pr-4">
|
||||
<section class="h-12 w-48 border border-gray" />
|
||||
</div>
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 gap-8 mt-8">
|
||||
<ul class="grid grid-cols-3">
|
||||
{#each packages as pkg}
|
||||
<li>
|
||||
<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
|
||||
</li>
|
||||
<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,149 +6,149 @@
|
|||
* * make cors work with api.tea.xyz/v1
|
||||
*/
|
||||
import type { Package } from '../types';
|
||||
const packages: Package[] = [
|
||||
{
|
||||
slug: 'mesonbuild_com',
|
||||
homepage: 'https://mesonbuild.com',
|
||||
name: 'mesonbuild.com',
|
||||
version: '0.63.3',
|
||||
last_modified: '2022-10-06T15:45:08.000Z',
|
||||
full_name: 'mesonbuild.com',
|
||||
dl_count: 270745,
|
||||
thumb_image_name: 'mesonbuild_com_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Fast and user friendly build system',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pixman_org',
|
||||
homepage: 'http://www.pixman.org/',
|
||||
maintainer: 'freedesktop',
|
||||
name: 'pixman.org',
|
||||
version: '0.40.0',
|
||||
last_modified: '2022-09-26T19:37:47.000Z',
|
||||
full_name: 'pixman.org',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'pixman_org_option 1.jpg ',
|
||||
desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'freedesktop_org_pkg_config',
|
||||
homepage: 'https://freedesktop.org',
|
||||
maintainer: 'freedesktop.org',
|
||||
name: 'pkg-config',
|
||||
version: '0.29.2',
|
||||
last_modified: '2022-10-20T01:32:15.000Z',
|
||||
full_name: 'freedesktop.org/pkg-config',
|
||||
dl_count: 2661501,
|
||||
thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
|
||||
desc: 'Manage compile and link flags for libraries',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'gnu_org_gettext',
|
||||
homepage: 'https://gnu.org',
|
||||
maintainer: 'gnu.org',
|
||||
name: 'gettext',
|
||||
version: '0.21.1',
|
||||
last_modified: '2022-10-20T01:23:46.000Z',
|
||||
full_name: 'gnu.org/gettext',
|
||||
dl_count: 3715970,
|
||||
thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
|
||||
desc: 'GNU internationalization (i18n) and localization (l10n) library',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'ipfs_tech',
|
||||
homepage: 'https://ipfs.tech',
|
||||
name: 'ipfs.tech',
|
||||
version: '0.16.0',
|
||||
last_modified: '2022-10-19T21:36:52.000Z',
|
||||
full_name: 'ipfs.tech',
|
||||
dl_count: 14457,
|
||||
thumb_image_name: 'ipfs_tech_option 2.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Peer-to-peer hypermedia protocol',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'nixos_org_patchelf',
|
||||
homepage: 'https://nixos.org',
|
||||
maintainer: 'nixos.org',
|
||||
name: 'patchelf',
|
||||
version: '0.15.0',
|
||||
last_modified: '2022-09-27T04:50:44.000Z',
|
||||
full_name: 'nixos.org/patchelf',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
|
||||
desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'tea.xyz',
|
||||
version: '0.8.6',
|
||||
last_modified: '2022-10-19T19:13:51.000Z',
|
||||
full_name: 'tea.xyz',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_option 2.jpg ',
|
||||
desc: 'Website of tea.xyz',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'charm_sh_gum',
|
||||
homepage: 'https://charm.sh',
|
||||
maintainer: 'charm.sh',
|
||||
name: 'gum',
|
||||
version: '0.8.0',
|
||||
last_modified: '2022-10-21T02:15:16.000Z',
|
||||
full_name: 'charm.sh/gum',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'charm_sh_gum.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pyyaml_org',
|
||||
homepage: 'https://pyyaml.org',
|
||||
name: 'pyyaml.org',
|
||||
version: '0.2.5',
|
||||
last_modified: '2022-10-03T15:35:14.000Z',
|
||||
full_name: 'pyyaml.org',
|
||||
dl_count: 107505,
|
||||
thumb_image_name: 'pyyaml_org_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'YAML framework for Python',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz_gx_cc',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'cc',
|
||||
version: '0.1.0',
|
||||
last_modified: '2022-10-19T16:47:44.000Z',
|
||||
full_name: 'tea.xyz/gx/cc',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_gx.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
|
||||
installs: 0
|
||||
}
|
||||
];
|
||||
|
||||
export async function getPackages(): Promise<Package[]> {
|
||||
const packages: Package[] = [
|
||||
{
|
||||
slug: 'mesonbuild_com',
|
||||
homepage: 'https://mesonbuild.com',
|
||||
name: 'mesonbuild.com',
|
||||
version: '0.63.3',
|
||||
last_modified: '2022-10-06T15:45:08.000Z',
|
||||
full_name: 'mesonbuild.com',
|
||||
dl_count: 270745,
|
||||
thumb_image_name: 'mesonbuild_com_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Fast and user friendly build system',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pixman_org',
|
||||
homepage: 'http://www.pixman.org/',
|
||||
maintainer: 'freedesktop',
|
||||
name: 'pixman.org',
|
||||
version: '0.40.0',
|
||||
last_modified: '2022-09-26T19:37:47.000Z',
|
||||
full_name: 'pixman.org',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'pixman_org_option 1.jpg ',
|
||||
desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'freedesktop_org_pkg_config',
|
||||
homepage: 'https://freedesktop.org',
|
||||
maintainer: 'freedesktop.org',
|
||||
name: 'pkg-config',
|
||||
version: '0.29.2',
|
||||
last_modified: '2022-10-20T01:32:15.000Z',
|
||||
full_name: 'freedesktop.org/pkg-config',
|
||||
dl_count: 2661501,
|
||||
thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
|
||||
desc: 'Manage compile and link flags for libraries',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'gnu_org_gettext',
|
||||
homepage: 'https://gnu.org',
|
||||
maintainer: 'gnu.org',
|
||||
name: 'gettext',
|
||||
version: '0.21.1',
|
||||
last_modified: '2022-10-20T01:23:46.000Z',
|
||||
full_name: 'gnu.org/gettext',
|
||||
dl_count: 3715970,
|
||||
thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
|
||||
desc: 'GNU internationalization (i18n) and localization (l10n) library',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'ipfs_tech',
|
||||
homepage: 'https://ipfs.tech',
|
||||
name: 'ipfs.tech',
|
||||
version: '0.16.0',
|
||||
last_modified: '2022-10-19T21:36:52.000Z',
|
||||
full_name: 'ipfs.tech',
|
||||
dl_count: 14457,
|
||||
thumb_image_name: 'ipfs_tech_option 2.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Peer-to-peer hypermedia protocol',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'nixos_org_patchelf',
|
||||
homepage: 'https://nixos.org',
|
||||
maintainer: 'nixos.org',
|
||||
name: 'patchelf',
|
||||
version: '0.15.0',
|
||||
last_modified: '2022-09-27T04:50:44.000Z',
|
||||
full_name: 'nixos.org/patchelf',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
|
||||
desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'tea.xyz',
|
||||
version: '0.8.6',
|
||||
last_modified: '2022-10-19T19:13:51.000Z',
|
||||
full_name: 'tea.xyz',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_option 2.jpg ',
|
||||
desc: 'Website of tea.xyz',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'charm_sh_gum',
|
||||
homepage: 'https://charm.sh',
|
||||
maintainer: 'charm.sh',
|
||||
name: 'gum',
|
||||
version: '0.8.0',
|
||||
last_modified: '2022-10-21T02:15:16.000Z',
|
||||
full_name: 'charm.sh/gum',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'charm_sh_gum.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pyyaml_org',
|
||||
homepage: 'https://pyyaml.org',
|
||||
name: 'pyyaml.org',
|
||||
version: '0.2.5',
|
||||
last_modified: '2022-10-03T15:35:14.000Z',
|
||||
full_name: 'pyyaml.org',
|
||||
dl_count: 107505,
|
||||
thumb_image_name: 'pyyaml_org_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'YAML framework for Python',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz_gx_cc',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'cc',
|
||||
version: '0.1.0',
|
||||
last_modified: '2022-10-19T16:47:44.000Z',
|
||||
full_name: 'tea.xyz/gx/cc',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_gx.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
|
||||
installs: 0
|
||||
}
|
||||
];
|
||||
return packages;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
export interface Package {
|
||||
slug: string;
|
||||
version: string;
|
||||
full_name: string;
|
||||
name: string;
|
||||
maintainer: string;
|
||||
homepage: string;
|
||||
last_modified: Date | string;
|
||||
thumb_image_url: string;
|
||||
thumb_image_name: string;
|
||||
desc: string;
|
||||
dl_count: number;
|
||||
installs: number;
|
||||
}
|
||||
// as much possible add types here that are unique to @tea/gui use only
|
||||
// else
|
||||
// please use the package @tea/ui/src/types.ts
|
||||
// things that go there are shared types/shapes like ie: Package
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
{/if}
|
||||
<figure />
|
||||
<div>
|
||||
<!-- all pages get inserted in this slot -->
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"$libs/*": ["src/libs/*"],
|
||||
"@api": ["src/lib/api/tauri.ts"],
|
||||
"$components/*": ["src/components/*"],
|
||||
"@tea/ui": ["../ui/src/*"]
|
||||
"@tea/ui/*": ["../ui/src/*"]
|
||||
}
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@api": ["src/lib/api_cli.ts"],
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
globals: {
|
||||
NodeJS: true
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
|
|
|
|||
1
packages/ui/src/PackageCard/PackageCard.css
Normal file
1
packages/ui/src/PackageCard/PackageCard.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import '../app.css';
|
||||
45
packages/ui/src/PackageCard/PackageCard.stories.ts
Normal file
45
packages/ui/src/PackageCard/PackageCard.stories.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import PackageCard from './PackageCard.svelte';
|
||||
import type { Package } from '../types';
|
||||
|
||||
const SamplePkg: Package = {
|
||||
slug: 'mesonbuild_com',
|
||||
homepage: 'https://mesonbuild.com',
|
||||
name: 'mesonbuild.com',
|
||||
version: '0.63.3',
|
||||
last_modified: '2022-10-06T15:45:08.000Z',
|
||||
full_name: 'mesonbuild.com',
|
||||
dl_count: 270745,
|
||||
thumb_image_name: 'mesonbuild_com_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Fast and user friendly build system',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
|
||||
installs: 0
|
||||
};
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
|
||||
export default {
|
||||
title: 'Example/PackageCard',
|
||||
component: PackageCard,
|
||||
tags: ['docsPage'],
|
||||
render: ({ pkg, link }: { pkg: Package; link: string }) => ({
|
||||
Component: PackageCard,
|
||||
props: { pkg }
|
||||
}),
|
||||
argTypes: {
|
||||
pkg: {
|
||||
name: 'pkg',
|
||||
description: 'type Package'
|
||||
},
|
||||
link: {
|
||||
name: 'link'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||
export const Example = {
|
||||
args: {
|
||||
pkg: SamplePkg,
|
||||
link: '#'
|
||||
}
|
||||
};
|
||||
129
packages/ui/src/PackageCard/PackageCard.svelte
Normal file
129
packages/ui/src/PackageCard/PackageCard.svelte
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<script type="ts">
|
||||
import './PackageCard.css';
|
||||
import type { Package } from '../types';
|
||||
export let pkg: Package;
|
||||
export let link: string;
|
||||
</script>
|
||||
|
||||
<section class="p-4 border border-gray">
|
||||
<figure>
|
||||
<img
|
||||
src={!pkg.thumb_image_url.includes('https://tea.xyz')
|
||||
? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
|
||||
: pkg.thumb_image_url}
|
||||
alt={pkg.name}
|
||||
/>
|
||||
<article class="card-thumb-label">
|
||||
<i class="icon-tea-logo-iconasset-1">
|
||||
<!-- TODO: replace with icon.svg -->
|
||||
</i>
|
||||
<h3>{pkg.name}</h3>
|
||||
{#if pkg.maintainer}
|
||||
<h4>• {pkg.maintainer}</h4>
|
||||
{/if}
|
||||
</article>
|
||||
</figure>
|
||||
<footer class="flex mt-4 justify-between items-center">
|
||||
<div>
|
||||
<p>
|
||||
<span>V {pkg.version}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<!-- TODO: move this button into its own reusable component -->
|
||||
<a href={link}>
|
||||
<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
|
||||
</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
background-color: #1a1a1a;
|
||||
transition: all 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
position: relative;
|
||||
float: right !important;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card-thumb-label i {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
font-size: 1.8vw;
|
||||
line-height: 1.8vw;
|
||||
margin: 0px 0px 0.5vw 0vw;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.card-thumb-label {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
left: 0;
|
||||
bottom: 0vw;
|
||||
padding: 1.116vw;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
font-size: 1.5vw;
|
||||
line-height: 1.5vw;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
display: inline-block;
|
||||
font-family: 'pp-neue-machina', sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
border: 0.5px solid #ffffff;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 100px;
|
||||
height: 2.232vw;
|
||||
min-height: 34px;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
background-color: #8000ff;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Icon Styling */
|
||||
|
||||
.detail-btn .icon-enter-arrow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 0.558vw;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.detail-btn:hover .icon-enter-arrow {
|
||||
display: inline-block;
|
||||
transform: rotate(-45deg) !important;
|
||||
}
|
||||
</style>
|
||||
1
packages/ui/src/SearchInput/SearchInput.css
Normal file
1
packages/ui/src/SearchInput/SearchInput.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import '../app.css';
|
||||
31
packages/ui/src/SearchInput/SearchInput.stories.ts
Normal file
31
packages/ui/src/SearchInput/SearchInput.stories.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import SearchInput from './SearchInput.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Example/SearchInput',
|
||||
component: SearchInput,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
|
||||
tags: [],
|
||||
render: (args) => ({
|
||||
Component: SearchInput,
|
||||
props: args
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
// layout: 'fullscreen'
|
||||
},
|
||||
argTypes: {
|
||||
// onLogin: { action: 'onLogin' },
|
||||
// onLogout: { action: 'onLogout' },
|
||||
// onCreateAccount: { action: 'onCreateAccount' }
|
||||
}
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const Big = {};
|
||||
72
packages/ui/src/SearchInput/SearchInput.svelte
Normal file
72
packages/ui/src/SearchInput/SearchInput.svelte
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script type="ts">
|
||||
import './SearchInput.css';
|
||||
|
||||
export let size: 'small' | 'medium' | 'large' = 'small';
|
||||
export let onSearch: (text: string) => void;
|
||||
|
||||
let timer: NodeJS.Timeout;
|
||||
const onChange = (e: KeyboardEvent) => {
|
||||
const t = e.target as HTMLInputElement;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
onSearch && onSearch(t.value);
|
||||
}, 300);
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class={`flex items-center ${size}`}>
|
||||
<div class="icon">
|
||||
<i class="icon-search-icon" />
|
||||
</div>
|
||||
<input type="search" placeholder="search_" on:keyup={onChange} />
|
||||
</section>
|
||||
|
||||
<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
|
||||
<style>
|
||||
.icon-search-icon {
|
||||
font-size: 30px;
|
||||
color: #949494;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
section.medium {
|
||||
height: 75px;
|
||||
}
|
||||
section.large {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
section input {
|
||||
font-family: 'pp-neue-machina', sans-serif;
|
||||
color: #00ffd0;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -5px;
|
||||
min-width: 60%;
|
||||
padding: 0px;
|
||||
background-color: #1a1a1a !important;
|
||||
border: none;
|
||||
color: #00ffd0;
|
||||
outline: none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
section.medium input {
|
||||
font-size: 24px;
|
||||
}
|
||||
section.large input {
|
||||
font-size: 32px;
|
||||
}
|
||||
section input::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #949494;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
14
packages/ui/src/types.ts
Normal file
14
packages/ui/src/types.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export interface Package {
|
||||
slug: string;
|
||||
version: string;
|
||||
full_name: string;
|
||||
name: string;
|
||||
maintainer: string;
|
||||
homepage: string;
|
||||
last_modified: Date | string;
|
||||
thumb_image_url: string;
|
||||
thumb_image_name: string;
|
||||
desc: string;
|
||||
dl_count: number;
|
||||
installs: number;
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ importers:
|
|||
eslint: ^8.16.0
|
||||
eslint-config-prettier: ^8.3.0
|
||||
eslint-plugin-svelte3: ^4.0.0
|
||||
fuse.js: ^6.6.2
|
||||
postcss: ^8.4.19
|
||||
prettier: ^2.6.2
|
||||
prettier-plugin-svelte: ^2.7.0
|
||||
|
|
@ -35,11 +36,12 @@ importers:
|
|||
dependencies:
|
||||
'@tauri-apps/api': 1.2.0
|
||||
buffer: 6.0.3
|
||||
fuse.js: 6.6.2
|
||||
devDependencies:
|
||||
'@playwright/test': 1.25.0
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.89
|
||||
'@sveltejs/adapter-static': 1.0.0-next.48
|
||||
'@sveltejs/kit': 1.0.0-next.562_svelte@3.53.1+vite@3.2.4
|
||||
'@sveltejs/kit': 1.0.0-next.563_svelte@3.53.1+vite@3.2.4
|
||||
'@tauri-apps/cli': 1.2.0
|
||||
'@tea/ui': link:../ui
|
||||
'@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
|
||||
|
|
@ -99,7 +101,7 @@ importers:
|
|||
'@storybook/svelte-vite': 7.0.0-alpha.51_xlscsvjyync2sh57nhuoanpbpq
|
||||
'@storybook/testing-library': 0.0.13_wcqkhtmu7mswc6yz4uyexck3ty
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.89
|
||||
'@sveltejs/kit': 1.0.0-next.561_svelte@3.53.1+vite@3.2.4
|
||||
'@sveltejs/kit': 1.0.0-next.563_svelte@3.53.1+vite@3.2.4
|
||||
'@sveltejs/package': 1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4
|
||||
'@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
|
||||
'@typescript-eslint/parser': 5.43.0_e3uo4sehh4zr4i6m57mkkxxv7y
|
||||
|
|
@ -3002,36 +3004,8 @@ packages:
|
|||
resolution: {integrity: sha512-Z5Z+QZOav6D0KDeU3ReksGERJg/sX1k5OKWWXyQ11OwGErEEwSXHYRUyjaBmZEPeGzpVVGwwMUK8YWJlG/MKeA==}
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.561_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-N8HQvS6gcm7R78ADfM4xjhuFS3Ir+Ezce3De8WOnISXQ1tS2npc5LMH9LRHHi14nfosAfJ7vUlcLwLE6N/I7+Q==}
|
||||
engines: {node: '>=16.14'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
peerDependencies:
|
||||
svelte: ^3.44.0
|
||||
vite: ^3.2.0
|
||||
dependencies:
|
||||
'@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
|
||||
'@types/cookie': 0.5.1
|
||||
cookie: 0.5.0
|
||||
devalue: 4.2.0
|
||||
kleur: 4.1.5
|
||||
magic-string: 0.26.7
|
||||
mime: 3.0.0
|
||||
sade: 1.8.1
|
||||
set-cookie-parser: 2.5.1
|
||||
sirv: 2.0.2
|
||||
svelte: 3.53.1
|
||||
tiny-glob: 0.2.9
|
||||
undici: 5.12.0
|
||||
vite: 3.2.4
|
||||
transitivePeerDependencies:
|
||||
- diff-match-patch
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.562_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-VgJzjtfjVLW/4A/vDtURc10PrS3bb/N62LHzqLZcUNb5+eN4a0k5cayC7Hz2tmtvrb2Qsg+piEAogvqjKBxrOg==}
|
||||
/@sveltejs/kit/1.0.0-next.563_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-RvQSE6dOuH4vE2hM5K/DezJlm9RjC5EMQK8X46mBXIggp8unaDH+YJyF+KRvAZE5sV93Hk5xaq0WZa8jtU42Jw==}
|
||||
engines: {node: '>=16.14'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
|
|
@ -6043,6 +6017,11 @@ packages:
|
|||
resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
|
||||
dev: true
|
||||
|
||||
/fuse.js/6.6.2:
|
||||
resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
|
||||
engines: {node: '>=10'}
|
||||
dev: false
|
||||
|
||||
/gauge/3.0.2:
|
||||
resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue