43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
/**
|
|
* rBooks applet definitions — Book Card.
|
|
*/
|
|
|
|
import type { AppletDefinition, AppletLiveData } from "../../shared/applet-types";
|
|
|
|
const bookCard: AppletDefinition = {
|
|
id: "book-card",
|
|
label: "Book Card",
|
|
icon: "📚",
|
|
accentColor: "#92400e",
|
|
ports: [
|
|
{ name: "query-in", type: "string", direction: "input" },
|
|
{ name: "book-out", type: "json", direction: "output" },
|
|
],
|
|
renderCompact(data: AppletLiveData): string {
|
|
const { snapshot } = data;
|
|
const title = (snapshot.title as string) || "Book";
|
|
const author = (snapshot.author as string) || "";
|
|
const progress = (snapshot.progress as number) || 0;
|
|
const rating = (snapshot.rating as number) || 0;
|
|
|
|
return `
|
|
<div>
|
|
<div style="font-size:13px;font-weight:600;margin-bottom:2px">${title}</div>
|
|
${author ? `<div style="font-size:11px;color:#94a3b8;margin-bottom:6px">${author}</div>` : ""}
|
|
${rating > 0 ? `<div style="font-size:12px;margin-bottom:4px">${"★".repeat(rating)}${"☆".repeat(5 - rating)}</div>` : ""}
|
|
<div style="font-size:10px;color:#94a3b8;margin-bottom:3px">Progress: ${progress}%</div>
|
|
<div style="background:#334155;border-radius:3px;height:5px;overflow:hidden">
|
|
<div style="background:#92400e;width:${progress}%;height:100%;border-radius:3px;transition:width 0.3s"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
onInputReceived(portName, value, ctx) {
|
|
if (portName === "query-in" && typeof value === "string") {
|
|
ctx.emitOutput("book-out", { query: value });
|
|
}
|
|
},
|
|
};
|
|
|
|
export const booksApplets: AppletDefinition[] = [bookCard];
|