ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#146 AssetType in home page

Browse source
This commit is contained in:
neil 2023-01-16 14:38:01 +08:00
parent cd973923b0
commit 1fc9c9dc08
3 changed files with 125 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
modules/gui/src/routes/+page.svelte
View file

@ -5,7 +5,9 @@
import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte'; import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
import Packages from '$components/Packages/Packages.svelte'; import Packages from '$components/Packages/Packages.svelte';
import News from '$components/News/News.svelte'; import News from '$components/News/News.svelte';
import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
import HeaderCard from '@tea/ui/HeaderCard/HeaderCard.svelte';
import ListAction from '@tea/ui/ListAction/ListAction.svelte';
</script> </script>
<div> <div>
@ -13,6 +15,31 @@
<section class="mt-8 mb-8"> <section class="mt-8 mb-8">
<Packages title="FOUNDATIN ESSENTIALS" /> <Packages title="FOUNDATIN ESSENTIALS" />
</section> </section>
<PageHeader coverUrl="/images/headers/header_bg_1.png">ASSET TYPE</PageHeader>
<section class="mt-8 mb-8 flex gap-4">
<div>
<HeaderCard
title="Browser Packages"
imgUrl="/images/bored-ape.png"
ctaUrl="/packages"
ctaLabel="Browse packages >"
articleTitle="What are packages?"
description="Collections of files aggregated to form larger frameworks & functions. Think Python or Node.js."
/>
<ListAction title="Top packages this week" mainCtaTitle="VIEW ALL PACKAGES" />
</div>
<div>
<HeaderCard
title="Browse Scripts"
imgUrl="/images/bored-ape.png"
ctaUrl="/packages"
ctaLabel="Browse scripts >"
articleTitle="What are scripts?"
description="Invisible applications that chain packages together in order to perform cool actions on your computer."
/>
<ListAction title="Top scripts this week" mainCtaTitle="VIEW ALL SCRIPTS" />
</div>
</section>
<PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader> <PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
<section class="mt-8 mb-8"> <section class="mt-8 mb-8">
<EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" /> <EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />

25
modules/ui/src/HeaderCard/HeaderCard.svelte Normal file
View file

@ -0,0 +1,25 @@
<script lang="ts">
import '../app.css';
export let title: string;
export let imgUrl: string;
export let ctaUrl: string;
export let ctaLabel: string;
export let articleTitle: string;
export let description: string;
</script>
<section class="border border-gray bg-black">
<header class="flex justify-between p-4 text-primary">
<h1 class="uppercase ">{title}</h1>
<a href={ctaUrl} class="text-sm">{ctaLabel}</a>
</header>
<figure class="h-40">
<img class="h-40 w-full object-cover" src={imgUrl} alt={title} />
</figure>
<article class="m-4 border border-gray p-4">
<h2 class="uppercase text-primary">{articleTitle}</h2>
<p class="text-gray">{description}</p>
</article>
</section>

72
modules/ui/src/ListAction/ListAction.svelte Normal file
View file

@ -0,0 +1,72 @@
<script lang="ts">
import Button from '../Button/Button.svelte';
export let title: string;
export let mainCtaTitle: string;
</script>
<section class="bg-black">
<header class="w-full border border-gray p-2 text-primary">{title}</header>
<ul class="border border-b-0 border-r-0 border-l-0 border-gray">
<li class="flex content-center border border-t-0 border-gray">
<figure class="m-2 w-10 bg-gray" />
<div class="flex flex-grow pt-4 leading-10">
<div class="text-sm">Homebrew</div>
<div class="pl-2 text-sm text-gray">ver 1.21</div>
</div>
<div class="m-2 w-28 border border-gray">
<Button>INSTALL</Button>
</div>
</li>
<li class="flex content-center border border-t-0 border-gray">
<figure class="m-2 w-10 bg-gray" />
<div class="flex flex-grow pt-4 leading-10">
<div class="text-sm">Homebrew</div>
<div class="pl-2 text-sm text-gray">ver 1.21</div>
</div>
<div class="m-2 w-28 border border-gray">
<Button>INSTALL</Button>
</div>
</li>
<li class="flex content-center border border-t-0 border-gray">
<figure class="m-2 w-10 bg-gray" />
<div class="flex flex-grow pt-4 leading-10">
<div class="text-sm">Homebrew</div>
<div class="pl-2 text-sm text-gray">ver 1.21</div>
</div>
<div class="m-2 w-28 border border-gray">
<Button>INSTALL</Button>
</div>
</li>
<li class="flex content-center border border-t-0 border-gray">
<figure class="m-2 w-10 bg-gray" />
<div class="flex flex-grow pt-4 leading-10">
<div class="text-sm">Homebrew</div>
<div class="pl-2 text-sm text-gray">ver 1.21</div>
</div>
<div class="m-2 w-28 border border-gray">
<Button>INSTALL</Button>
</div>
</li>
<li class="flex content-center border border-t-0 border-gray">
<figure class="m-2 w-10 bg-gray" />
<div class="flex flex-grow pt-4 leading-10">
<div class="text-sm">Homebrew</div>
<div class="pl-2 text-sm text-gray">ver 1.21</div>
</div>
<div class="m-2 w-28 border border-gray">
<Button>INSTALL</Button>
</div>
</li>
</ul>
<footer class="w-full border border-t-0 border-gray text-gray">
<a href="/" class="flex w-full">
<Button>
<div class="flex w-full justify-between p-2">
<button>{mainCtaTitle}</button>
<i class="icon-right-arrow" />
</div>
</Button>
</a>
</footer>
</section>