19 lines
1016 B
TypeScript
19 lines
1016 B
TypeScript
"use client";
|
||
|
||
import { createContext, useContext } from "react";
|
||
import { Frame } from "lucide-react";
|
||
import type { frameDropFeedback } from "@/lib/canvas-frames";
|
||
import styles from "./canvas.module.css";
|
||
|
||
export const FrameFeedback = createContext({ names: new Map<string, string>(), counts: new Map<string, number>(), drops: [] as ReturnType<typeof frameDropFeedback> });
|
||
|
||
export function MembershipBadge({ id, frameId, selected }: { id: string; frameId?: string; selected: boolean }) {
|
||
const { names, drops } = useContext(FrameFeedback);
|
||
const drop = drops.find((item) => item.id === id);
|
||
const target = drop ? drop.to : frameId;
|
||
const name = target ? names.get(target) : undefined;
|
||
if (!drop && !selected) return null;
|
||
const label = name ? `${drop && drop.to !== drop.from ? "松开加入" : "属于"}：${name}` : drop?.from ? `松开移出：${names.get(drop.from) || "分区"}` : null;
|
||
return label && <div className={styles.membershipBadge} title={label}><Frame size={11} />{label}</div>;
|
||
}
|