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;
|