70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
/// <reference path="../types/jsx.d.ts" />
|
|
import { React, Fragment } from "../deps.ts";
|
|
import Base from "./_base.tsx";
|
|
import type { IPackage } from "../db.ts";
|
|
import { sortVersions } from "../utils.ts";
|
|
|
|
function Package({ pkg }: { pkg: IPackage }) {
|
|
const { name, versions, owner, description, deprecated } = pkg;
|
|
|
|
const sorted = versions.sort(sortVersions).reverse();
|
|
|
|
return (
|
|
<div
|
|
class="card package-list-margin"
|
|
onClick={"window.location.href = '/package/" + name + "'"}
|
|
>
|
|
<div class="card-body">
|
|
<h4 class="card-title">
|
|
{name} <span class="badge">{sorted[0]}</span>
|
|
{deprecated && <span class="badge warning">deprecated</span>}
|
|
</h4>
|
|
<h5 class="card-subtitle">By {owner}</h5>
|
|
<div class="card-text">
|
|
{/* {versions.map((version) => (
|
|
<li>{version}</li>
|
|
))} */}
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
import { Main, Menu } from "./_default.tsx";
|
|
|
|
export default async function index({
|
|
packages,
|
|
search,
|
|
}: {
|
|
packages: IPackage[];
|
|
search: string;
|
|
}) {
|
|
return (
|
|
<Base>
|
|
<Main>
|
|
<form method="GET" action="./">
|
|
<div class="form-group package-list-margin">
|
|
{/* <label for="searchInput">Search</label> */}
|
|
<div style="display:flex">
|
|
<input
|
|
placeholder="Search..."
|
|
class="input-block"
|
|
type="text"
|
|
id="searchInput"
|
|
name="q"
|
|
value={search}
|
|
/>
|
|
<button>Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{packages.map((pkg) => (
|
|
<Package pkg={pkg} />
|
|
))}
|
|
</Main>
|
|
<Menu></Menu>
|
|
</Base>
|
|
);
|
|
}
|