articles view

src/views/home/articles/ArticleItem.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
 
 export interface ArticleItemProps {
@@ -7,14 +8,18 @@ export interface ArticleItemProps {
 }
 
 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',
+                '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">