Merge pull request #159 from teaxyz/package-metas

Package metas layout

modules/gui/src/routes/packages/[slug]/+page.svelte

@@ -13,7 +13,7 @@
 	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { getPackageBottles } from '@api';
 	import PackageDetail from '$components/PackageDetail/PackageDetail.svelte';
-
+	import PackageMetas from '@tea/ui/PackageMetas/PackageMetas.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 
@@ -82,10 +82,12 @@
 	</section>
 
 	<section class="mt-8 flex gap-8">
-		<div class="w-2/3 bg-black">
+		<div class="w-2/3">
-			<Tabs {tabs} />
+			<Tabs class="bg-black" {tabs} />
+		</div>
+		<div class="w-1/3">
+			<PackageMetas />
 		</div>
-		<div class="h-64 w-1/3 bg-gray">metas</div>
 	</section>
 	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
 	<section class="mt-8 h-64 bg-gray">snippets</section>

modules/ui/src/PackageMetas/PackageMetas.svelte

@@ -0,0 +1,76 @@
+<section class="bg-black">
+	<h1 class="border border-gray p-4 text-primary">METADATA</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">4 months ago</span>
+		</li>
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">MIT or Apache-2.0</span>
+		</li>
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">22.7 kB</span>
+		</li>
+	</ul>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">HOMEPAGE</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">https://homepage.org</span>
+		</li>
+	</ul>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">DOCUMENTATION</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">https://docs.org</span>
+		</li>
+	</ul>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">GITHUB REPOSITORY</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">https://github.orm/owner/repo</span>
+		</li>
+	</ul>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">OWNERS</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="flex items-center border border-gray p-4">
+			<figure class="h-5 w-5 bg-gray" />
+			<span class="ml-4">optimus_prime</span>
+		</li>
+		<li class="flex items-center border border-gray p-4">
+			<figure class="h-5 w-5 bg-gray" />
+			<span class="ml-4">batman_suparman</span>
+		</li>
+		<li class="flex items-center border border-gray p-4">
+			<figure class="h-5 w-5 bg-gray" />
+			<span class="ml-4">james_bond</span>
+		</li>
+		<li class="flex items-center border border-gray p-4">
+			<figure class="h-5 w-5 bg-gray" />
+			<span class="ml-4">pizza-rocks</span>
+		</li>
+		<li class="flex items-center border border-gray p-4">
+			<figure class="h-5 w-5 bg-gray" />
+			<span class="ml-4">cognito_inc</span>
+		</li>
+	</ul>
+	<h1 class="border border-t-0 border-gray p-4 text-primary">CATEGORIES</h1>
+	<ul class="border border-t-0 border-gray p-4">
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">utility</span>
+		</li>
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">design</span>
+		</li>
+		<li class="border border-gray p-4">
+			<i class="icon-calendar" />
+			<span class="ml-4">gaming</span>
+		</li>
+	</ul>
+</section>

modules/ui/src/Tabs/Tabs.svelte

@@ -2,6 +2,10 @@
 	import type { Tab } from '../types';
 	import { onMount } from 'svelte';
 
+	let clazz = '';
+
+	export { clazz as class };
+
 	import Button from '../Button/Button.svelte';
 
 	export let tabs: Tab[] = [];
@@ -17,7 +21,7 @@
 	console.log('t', tabs);
 </script>
 
-<section class="relative h-auto border border-gray">
+<section class={`relative h-auto border border-gray ${clazz || ''}`}>
 	<menu class="flex border border-gray">
 		{#each tabs as tab}
 			<div class="border border-y-0 border-l-0 border-gray text-white">

modules/ui/src/icons/fonts/tea-icons.svg

@@ -31,4 +31,5 @@
 <glyph glyph-name="filter" unicode="&#118;" d="M461 398c0 18-14 32-32 33l0 0-343 0 0 0c0 0-1 0-2 0-18 0-33-15-33-33 0-11 5-20 13-26l154-154 0-96 0 0 0 0c0-7 4-12 9-15l0 0 40-23c0 0 1 0 1-1l0 0 0 0c3-1 6-2 9-2 10 0 17 8 17 17 0 1 0 1 0 2l0 0 0 118 156 155 0 0c7 6 11 15 11 25z m-296-33l0 0 0 0z"/>
 <glyph glyph-name="upload" unicode="&#119;" d="M440 258l-93 0c-12 0-22-7-25-17-10-28-36-46-66-46-30 0-56 18-66 46-3 10-13 17-25 17l-93 0c-14 0-26-11-26-25l0-144c0-14 12-25 26-25l368 0c14 0 26 11 26 25l0 144c0 14-12 25-26 25z m-257 79l34 0 0-88c0-4 4-7 7-7l64 0c3 0 7 3 7 7l0 88 34 0c2 0 5 1 6 3 1 2 1 5-1 7l-73 98c-1 2-3 3-5 3l0 0c-3 0-5-1-6-3l-72-98c-2-2-2-5-1-7 1-2 4-3 6-3z"/>
 <glyph glyph-name="share" unicode="&#120;" d="M421 229l0-74c0-22-8-42-25-58-16-16-35-24-58-24l-237 0c-23 0-42 8-59 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 17 16 36 24 59 24l72 0c3 0 5 0 7-2 2-2 3-4 3-7 0-5-3-8-8-9-15-5-27-11-38-17-2-1-3-1-4-1l-32 0c-13 0-24-5-33-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 33-13l237 0c13 0 24 4 33 13 9 9 13 20 13 32l0 62c0 3 2 6 5 8 5 2 11 6 16 10 3 3 6 4 10 3 4-2 6-5 6-9z m67 142l-109-110c-4-3-8-5-13-5-3 0-5 0-7 1-8 4-12 9-12 17l0 55-45 0c-62 0-104-12-125-37-23-26-30-71-22-135 1-5-1-8-5-10-2-1-3-1-4-1-3 0-5 2-7 4-2 3-4 6-6 9-2 3-6 10-11 19-6 10-11 20-15 29-4 9-7 20-11 32-3 13-5 25-5 35 0 10 1 18 1 26 1 8 2 17 4 26 2 9 5 18 8 25 4 8 8 16 14 23 5 8 12 15 19 22 8 6 17 12 27 17 11 6 23 10 36 14 13 4 28 7 46 9 17 2 36 3 56 3l45 0 0 55c0 8 4 13 12 17 2 1 4 1 7 1 5 0 9-2 13-5l109-110c4-4 6-8 6-13 0-5-2-9-6-13z"/>
+<glyph glyph-name="calendar" unicode="&#121;" d="M55 37l402 0 0 292-402 0z m110 347l0 82c0 3-1 5-3 7-2 2-4 2-7 2l-18 0c-3 0-5 0-6-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 1-1 3-2 6-2l18 0c3 0 5 1 7 2 2 2 3 4 3 7z m219 0l0 82c0 3-1 5-3 7-1 2-3 2-6 2l-18 0c-3 0-5 0-7-2-2-2-3-4-3-7l0-82c0-3 1-5 3-7 2-1 4-2 7-2l18 0c3 0 5 1 6 2 2 2 3 4 3 7z m110 18l0-365c0-10-4-19-11-26-7-7-16-11-26-11l-402 0c-10 0-19 4-26 11-7 7-11 16-11 26l0 365c0 10 4 19 11 26 7 7 16 11 26 11l36 0 0 27c0 13 5 24 14 33 9 9 20 13 32 13l18 0c13 0 24-4 33-13 9-9 13-20 13-33l0-27 110 0 0 27c0 13 4 24 13 33 9 9 20 13 33 13l18 0c12 0 23-4 32-13 9-9 14-20 14-33l0-27 36 0c10 0 19-4 26-11 7-7 11-16 11-26z"/>
 </font></defs></svg>

modules/ui/src/icons/icons.css

@@ -109,3 +109,6 @@
 .icon-share:before {
 	content: '\78';
 }
+.icon-calendar:before {
+	content: '\79';
+}