mirror of
https://github.com/ivabus/gui
synced 2025-06-08 00:00:27 +03:00
#33 FeaturedPackages component
This commit is contained in:
neil
parent
1cfe217d11
commit
7f370134eb
5 changed files with 189 additions and 6 deletions
|
|
@ -42,7 +42,8 @@
|
|||
"dependencies": {
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"buffer": "^6.0.3",
|
||||
"fuse.js": "^6.6.2"
|
||||
"fuse.js": "^6.6.2",
|
||||
"svelte-watch-resize": "^1.0.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import type { Package } from '@tea/ui/types';
|
||||
export let pkg: Package;
|
||||
</script>
|
||||
|
||||
<figure class="w-full h-full relative">
|
||||
<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 class="text-3xl">{pkg.name}</h3>
|
||||
{#if pkg.maintainer}
|
||||
<h4 class="text-lg mt-2">• {pkg.maintainer}</h4>
|
||||
{/if}
|
||||
</article>
|
||||
</figure>
|
||||
|
||||
<style>
|
||||
img {
|
||||
box-shadow: 0px 0px 12px #0c0c0c !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card-thumb-label i {
|
||||
font-size: 1.5vw;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.card-thumb-label h3 {
|
||||
color: black;
|
||||
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: 20px;
|
||||
padding: 1.116vw;
|
||||
text-align: left;
|
||||
min-width: 40%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.card-thumb-label h4 {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,107 @@
|
|||
<script lang="ts">
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
import { onDestroy } from 'svelte';
|
||||
import { watchResize } from 'svelte-watch-resize';
|
||||
import type { Package } from '@tea/ui/types';
|
||||
import FeaturedPackage from './FeaturedPackage.svelte';
|
||||
|
||||
let featuredPackages: 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
|
||||
}
|
||||
];
|
||||
|
||||
let pkgFocus = 0;
|
||||
let width = 0;
|
||||
let styleFeaturedPackages: string;
|
||||
|
||||
function getFeaturedStyle() {
|
||||
const position = pkgFocus * width;
|
||||
return `
|
||||
width: ${featuredPackages.length * width}px;
|
||||
left: -${position}px;
|
||||
transition: left 0.6s ease-in;
|
||||
`;
|
||||
}
|
||||
|
||||
function handleContainerResize(node: HTMLElement) {
|
||||
width = node.clientWidth;
|
||||
styleFeaturedPackages = getFeaturedStyle();
|
||||
}
|
||||
|
||||
const loop = setInterval(() => {
|
||||
pkgFocus++;
|
||||
if (pkgFocus === featuredPackages.length) {
|
||||
pkgFocus = 0;
|
||||
}
|
||||
styleFeaturedPackages = getFeaturedStyle();
|
||||
}, 3000);
|
||||
|
||||
onDestroy(() => clearInterval(loop));
|
||||
</script>
|
||||
|
||||
<Placeholder label="FeaturedPackages" />
|
||||
<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
|
||||
<!-- <Placeholder label="FeaturedPackages" /> -->
|
||||
<header class="bg-accent h-12 flex justify-between px-2 items-center">
|
||||
<p>FEATURED PACKAGES</p>
|
||||
<ul class="flex gap-2">
|
||||
{#each featuredPackages as pkg, i}
|
||||
<li
|
||||
class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
|
||||
i === pkgFocus ? 'bg-purple-900' : ''
|
||||
}`}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
</header>
|
||||
<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
|
||||
<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
|
||||
{#each featuredPackages as pkg}
|
||||
<div class="h-full" style={`width:${width}px`}>
|
||||
<a href={`/packages/${pkg.slug}`}>
|
||||
<FeaturedPackage {pkg} />
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
</figure>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,21 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const primary = '#00ffd0';
|
||||
const green = '#00ffd0';
|
||||
const black = '#1a1a1a';
|
||||
const white = '#fff';
|
||||
const gray = '#949494';
|
||||
const purple = '#8000FF';
|
||||
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
colors: {
|
||||
primary,
|
||||
green: primary,
|
||||
primary: green,
|
||||
accent: purple,
|
||||
green,
|
||||
purple: {
|
||||
700: purple,
|
||||
900: '#B076EC'
|
||||
},
|
||||
black,
|
||||
white,
|
||||
gray
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ importers:
|
|||
svelte: ^3.49.0
|
||||
svelte-check: ^2.8.0
|
||||
svelte-preprocess: ^4.10.7
|
||||
svelte-watch-resize: ^1.0.3
|
||||
svelte2tsx: ^0.5.20
|
||||
tailwindcss: ^3.2.4
|
||||
tslib: ^2.3.1
|
||||
|
|
@ -37,6 +38,7 @@ importers:
|
|||
'@tauri-apps/api': 1.2.0
|
||||
buffer: 6.0.3
|
||||
fuse.js: 6.6.2
|
||||
svelte-watch-resize: 1.0.3
|
||||
devDependencies:
|
||||
'@playwright/test': 1.25.0
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.90
|
||||
|
|
@ -4202,6 +4204,10 @@ packages:
|
|||
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
|
||||
dev: false
|
||||
|
||||
/batch-processor/1.0.0:
|
||||
resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
|
||||
dev: false
|
||||
|
||||
/better-opn/2.1.1:
|
||||
resolution: {integrity: sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==}
|
||||
engines: {node: '>8.0.0'}
|
||||
|
|
@ -5043,6 +5049,12 @@ packages:
|
|||
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
|
||||
dev: true
|
||||
|
||||
/element-resize-detector/1.2.4:
|
||||
resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
|
||||
dependencies:
|
||||
batch-processor: 1.0.0
|
||||
dev: false
|
||||
|
||||
/emoji-regex/8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
dev: true
|
||||
|
|
@ -9575,6 +9587,12 @@ packages:
|
|||
typescript: 4.9.3
|
||||
dev: true
|
||||
|
||||
/svelte-watch-resize/1.0.3:
|
||||
resolution: {integrity: sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==}
|
||||
dependencies:
|
||||
element-resize-detector: 1.2.4
|
||||
dev: false
|
||||
|
||||
/svelte/3.53.1:
|
||||
resolution: {integrity: sha512-Q4/hHkktZogGhN5iqxqSi9sjEVoe/NbIxX4hXEHoasTxj+TxEQVAq66LnDMdAZxjmsodkoI5F3slqsS68U7FNw==}
|
||||
engines: {node: '>= 8'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue