parent
b433662dba
commit
ecbc663ef2
@ -1,40 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { apiCollect } from '@/services';
|
||||
|
||||
interface Props {
|
||||
active: boolean;
|
||||
id: string;
|
||||
type: string;
|
||||
size?: number;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export default function Collect({ active, id, type, size = 24, text = '' }: Props) {
|
||||
const [state, setState] = useState<boolean>(false); // 点赞状态
|
||||
|
||||
useEffect(() => {
|
||||
setState(active);
|
||||
}, [active]);
|
||||
|
||||
// 收藏/取消收藏
|
||||
const handleCollect = async () => {
|
||||
setState(!state); // 更新点赞状态
|
||||
const res = await apiCollect({ isAdd: !state, objectId: id, collectType: type });
|
||||
if (res.code !== 200) setState(!state); // 如果请求失败,回退状态
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row items-center gap-[9px] cursor-pointer group" onClick={handleCollect}>
|
||||
{/* 文案 */}
|
||||
{!!text && <p className="text-[rgba(0,0,0,0.4)] text-[13px] leading-[18.2px] group-hover:text-brand">{text}</p>}
|
||||
{/* 图标 */}
|
||||
|
||||
<div
|
||||
className={`w-[${size}px] h-[${size}px] ${state ? 'bg-[url(/img/icon/thumb-active.svg)]' : 'bg-[url(/img/icon/thumb.svg)]'} group-hover:bg-[url(/img/icon/thumb-active.svg)]`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Reference in new issue