40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { Launch } from '@material-ui/icons';
|
|
type Props = {
|
|
title: string,
|
|
description: string,
|
|
tags: string[],
|
|
year?: string | number,
|
|
url?: string,
|
|
isLunched?: boolean
|
|
}
|
|
|
|
|
|
const Journey = ({ title, description, tags, year, url, isLunched }: Props) => {
|
|
|
|
return (
|
|
<div className="w-full bg-dark-primary rounded-md flex flex-col p-3 my-4 mx-3">
|
|
<h3 className="text-2xl font-bold bg-gold text-dark-primary rounded-lg px-1 py-2">
|
|
{title}
|
|
{
|
|
isLunched &&
|
|
<a href={url} target="_blank" rel="noreferrer" className='relative'>
|
|
<Launch fontSize='small' />
|
|
</a>
|
|
}
|
|
</h3>
|
|
<p className="text-secondary opacity-80 text-sm text-left px-1 my-2">{description}</p>
|
|
<div className="flex flex-row flex-wrap ">
|
|
{tags.map((tag, i) => (
|
|
<p key={i} className="text-dark-primary bg-secondary rounded-md p-1 opacity-80 text-xs m-1">
|
|
{`#${tag}`}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<p className="text-secondary opacity-60 text-xs text-left px-1 mt-1 mb-0">
|
|
built and designed at <strong className="opacity-80 text-sm" >{year}</strong>
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Journey; |