dejanandClaude Opus 5
b8bf987d0e
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung, nicht der Produktivbetrieb. Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten), 26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026). Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner (Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste Abweichungen stehen in docs/HERKUNFT.md. Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM, KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Avatar Group — https://app.subframe.com/f023064a5ca0/library?component=Avatar+Group_6e7444ab-1d67-47f5-af23-1a2d3ecf1016
|
|
*/
|
|
|
|
import React from "react";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface AvatarOverflowProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
border?: boolean;
|
|
overflowLabel?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const AvatarOverflow = React.forwardRef<HTMLDivElement, AvatarOverflowProps>(
|
|
function AvatarOverflow(
|
|
{
|
|
border = false,
|
|
overflowLabel,
|
|
className,
|
|
...otherProps
|
|
}: AvatarOverflowProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/dbd63208 flex h-10 w-10 cursor-pointer items-center justify-center overflow-hidden rounded-round bg-surface-neutral-tertiary group/avataroverflow shrink-0 relative",
|
|
{ "border border-solid border-border-on-primary": border },
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{overflowLabel ? (
|
|
<span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-secondary">
|
|
{overflowLabel}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface AvatarGroupRootProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
hoverEffect?: "on" | "off";
|
|
border?: boolean;
|
|
showOverflow?: boolean;
|
|
children?: React.ReactNode;
|
|
overflowLabel?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const AvatarGroupRoot = React.forwardRef<HTMLDivElement, AvatarGroupRootProps>(
|
|
function AvatarGroupRoot(
|
|
{
|
|
hoverEffect = "off",
|
|
border = false,
|
|
showOverflow = false,
|
|
children,
|
|
overflowLabel,
|
|
className,
|
|
...otherProps
|
|
}: AvatarGroupRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/6e7444ab items-center group/mtavatargroup inline-flex [&>*:not(:first-child)]:-ml-2",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children ? (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"items-center inline-flex [&>*:not(:first-child)]:-ml-2 [&>*]:relative relative [&>*]:z-0 z-0 [&>*:nth-child(1)]:z-[1] [&>*:nth-child(2)]:z-[2] [&>*:nth-child(3)]:z-[3] [&>*:nth-child(4)]:z-[4] [&>*:nth-child(5)]:z-[5]",
|
|
{
|
|
"[&>*]:border [&>*]:border-solid [&>*]:border-border-on-primary":
|
|
border,
|
|
"[&>*]:transition-transform [&>*]:duration-200 [&>*:hover]:scale-110 [&>*:hover]:rotate-6 [&>*:hover]:z-20":
|
|
hoverEffect === "on",
|
|
}
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
<AvatarOverflow
|
|
className={SubframeUtils.twClassNames("hidden relative z-10", {
|
|
flex: showOverflow,
|
|
"border border-solid border-border-on-primary": border,
|
|
"transition-transform duration-200 hover:scale-110 hover:rotate-6":
|
|
hoverEffect === "on",
|
|
})}
|
|
overflowLabel={overflowLabel}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const AvatarGroup = Object.assign(AvatarGroupRoot, {
|
|
AvatarOverflow,
|
|
});
|