mirror of https://github.com/aldy505/code.git
117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { GithubLanguage } from '../types/github';
|
|
|
|
const image = {
|
|
folder: 'folder.svg',
|
|
star: 'star.svg',
|
|
};
|
|
|
|
function getLanguageColor(language: GithubLanguage) {
|
|
if (!language) {
|
|
return;
|
|
}
|
|
|
|
switch (language.toLowerCase()) {
|
|
case 'go':
|
|
return '#a1d5ed';
|
|
|
|
case 'julia':
|
|
return '#d35bde';
|
|
|
|
case 'javascript':
|
|
return '#e4f060';
|
|
|
|
case 'typescript':
|
|
return '#4e85de';
|
|
|
|
case 'vue':
|
|
return '#4ede85';
|
|
|
|
case 'shell':
|
|
return '#9dde4e';
|
|
|
|
case 'html':
|
|
return '#de704e';
|
|
|
|
default:
|
|
return '#bab7b6';
|
|
}
|
|
}
|
|
|
|
interface Props {
|
|
url: string;
|
|
name: string;
|
|
description: string;
|
|
language: string;
|
|
stars: number;
|
|
}
|
|
|
|
function Repository(props: Partial<Props>) {
|
|
return (
|
|
<div class="flex flex-col py-4 px-2 lg:px-0 opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
|
|
<div class="flex-1 text-sm hover:text-blue-300 font-bold transition duration-500 ease-in-out">
|
|
<a href={props.url}>
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex-initial">
|
|
<img
|
|
src={image.folder}
|
|
class="text-black dark:text-white h-3 w-3 fill-current inline"
|
|
alt="Repository"
|
|
/>
|
|
</div>
|
|
<div class="flex-initial px-4">
|
|
{ props.name }
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="flex-2 text-xs opacity-80 lg:w-2/3">
|
|
{ props.description }
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex-1 text-xs">
|
|
<div class="flex flex-row items-center content-center">
|
|
<div class="flex-initial">
|
|
<svg
|
|
v-show="language"
|
|
class="h-2 w-2 inline"
|
|
viewBox="0 0 100 100"
|
|
>
|
|
<circle
|
|
cx="50"
|
|
cy="50"
|
|
r="40"
|
|
fill={getLanguageColor(props.language as GithubLanguage)}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-initial px-2">
|
|
{ props.language }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="stars > 0"
|
|
class="flex-2 text-xs"
|
|
>
|
|
<div class="flex flex-row items-center content-center">
|
|
<div class="flex-initial">
|
|
<img
|
|
src={image.star}
|
|
class="text-white font-bold h-3 w-3 fill-current -inset-y-1"
|
|
alt="Stargazers"
|
|
/>
|
|
</div>
|
|
<div class="flex-initial px-2">
|
|
{ props.stars }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Repository;
|