50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { cn } from '../../../lib/cn';
|
|
|
|
export interface ArticleItemProps {
|
|
id: number;
|
|
name: string;
|
|
tags: string[];
|
|
}
|
|
|
|
const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
|
|
// type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
|
|
'gap-[20px] px-[20px] py-[10px] box-border ',
|
|
'border-b-[1px] border-b-liquid-lighter cursor-pointer hover:bg-liquid-lighter transition-all duration-300',
|
|
)}
|
|
onClick={() => {
|
|
navigate(`/article/${id}`);
|
|
}}
|
|
>
|
|
<div className="h-[23px] flex ">
|
|
<div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">
|
|
#{id}
|
|
</div>
|
|
<div className="text-[18px] font-bold flex items-center bg-red-400r">
|
|
{name}
|
|
</div>
|
|
</div>
|
|
<div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
|
|
{tags.map((v, i) => (
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
|
|
v == 'Sertificated' && 'text-liquid-green',
|
|
)}
|
|
>
|
|
{v}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArticleItem;
|