mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
#32 initial implementation of @tea/ui:PackageCard
This commit is contained in:
neil
parent
acafea3842
commit
53a9386b0a
12 changed files with 203 additions and 32 deletions
|
|
@ -4,3 +4,4 @@
|
|||
</script>
|
||||
|
||||
<Placeholder label="FeaturedCourses" />
|
||||
<h1>test</h1>
|
||||
|
|
|
|||
|
|
@ -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,9 +1,11 @@
|
|||
<script type="ts">
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
|
||||
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 { onMount } from 'svelte';
|
||||
|
||||
let packages: Package[] = [];
|
||||
|
|
@ -25,11 +27,9 @@
|
|||
<h2>Filter Packages</h2>
|
||||
<input type="search" class="text-white bg-black border border-gray" />
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 gap-8 mt-8">
|
||||
<ul class="grid grid-cols-3 mt-8">
|
||||
{#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>
|
||||
|
|
|
|||
|
|
@ -150,6 +150,5 @@ const packages: Package[] = [
|
|||
];
|
||||
|
||||
export async function getPackages(): Promise<Package[]> {
|
||||
|
||||
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
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: '#'
|
||||
}
|
||||
};
|
||||
128
packages/ui/src/PackageCard/PackageCard.svelte
Normal file
128
packages/ui/src/PackageCard/PackageCard.svelte
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<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">
|
||||
<div>
|
||||
<p>
|
||||
<span>V {pkg.version}</span>
|
||||
<!--
|
||||
TODO: uncomment once install counts improve
|
||||
<br>
|
||||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<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: 134px;
|
||||
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>
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue