search_awesome/islands/RepoViewer.tsx

62 lines
2.0 KiB
TypeScript
Raw Permalink Normal View History

2022-11-29 01:52:44 +09:00
import { RepoData, getRepos, searchRepos } from "../api/repo.ts";
import { useEffect, useRef, useState } from "preact/hooks";
import { SearchBar } from "../components/SearchBar.tsx";
import { useRelativeTopOppacity } from "../util/hook.ts";
function RepoTag(props: { tag: string }) {
const { tag } = props;
return (
<a href={`https://github.com/topics/${tag}`}
class="inline-flex items-center px-2 py-1 m-1 text-xs font-medium leading-5 text-blue-800 bg-blue-100 rounded-full">
{tag}
</a>
);
}
function RepoItem(props: RepoData) {
const ref = useRef<HTMLDivElement | null>(null);
const opacity = useRelativeTopOppacity({elem: ref});
const { name, description, url, author, stars, tags, forks } = props;
return (
2022-12-01 19:40:03 +09:00
<div ref={ref} class="flex flex-col bg-white rounded"
2022-11-29 01:52:44 +09:00
style={`opacity: ${opacity}`}>
<div class="flex flex-col flex-grow p-4">
<a class="text-xl font-bold text-gray-900 hover:text-gray-700 flex-auto"
href={url}>{author+"/"+name}</a>
<div class="flex flex-row">
<p class="text-gray-600 ml-2 text-xs">
{forks} forks
</p>
<p class="text-gray-600 ml-2 text-xs">
{stars} stars
</p>
</div>
<p class="mt-2 text-gray-600">{description}</p>
<div class="flex flex-wrap mt-4 -m-1">
{tags.map(tag => (
<RepoTag tag={tag} />
))}
</div>
</div>
</div>
);
}
export default function RepoViewer({repos}: {repos: RepoData[]}) {
return (
<div class="mt-4">
{repos.length > 0 ? (
<ul class="divide-y divide-gray-200">
{repos.map((repo) => (
<li class="py-4">
<RepoItem {...repo} />
</li>
))}
</ul>
) : (
<p class="text-gray-500">No results found.</p>
)}
</div>
);
}