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