s0wlz_talespire_symbiotes/talespire-dsa5-charactersheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor SheetHeader component: improve formatting, adjust styles, and update data handling logic.

Browse Source
This commit is contained in:
vikingowl
2025-07-06 22:32:52 +02:00
parent 44d74396e5
commit b5d85bc0fc
1 changed files with 125 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/modules/main/modules/sheetHeader/components/SheetHeader.tsx
View File

@@ -31,7 +31,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
if (isMounted) {
setRaceName(race?.name || jsonData.r);
setRaceVariantName(raceVariant?.name|| '');
setRaceVariantName(raceVariant?.name || '');
// For profession, handle gendered name
if (profession?.name) {
setProfessionName(profession.name.m || profession.name.f || jsonData.p);
@@ -97,32 +97,49 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
))}
</div>
<div className="w-[100%] flex pt-5">
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
LP
<span
className="absolute left-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Lebenspunkte
</span>
</span>
<div
className="ms-5 w-[50%] bg-red-800 rounded-s-full h-6 flex items-center justify-center text-white text-sm font-medium">
className="ms-5 w-[100%] bg-gradient-to-r from-red-900 to-red-600 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
15 / 15
</div>
<div
className="me-5 w-[50%] bg-green-800 rounded-e-full h-6 flex items-center justify-center text-white text-sm font-medium">
16 / 16
</div>
<span className="relative group cursor-help whitespace-nowrap">
AP/KP
<span
className="absolute right-0 bottom-full mb-1 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Astralpunkte / Karmapunkte
</span>
</span>
</div>
<div className="w-[100%] flex pt-5">
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
AP
<span
className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Astralpunkte
</span>
</span>
<div
className="ms-5 w-[100%] bg-gradient-to-r from-blue-900 to-blue-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
16 / 16
</div>
</div>
<div className="w-[100%] flex pt-2">
<span className="relative group cursor-help">
KP
<span
className="absolute left-0 bottom-full mb-1 px-2 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
Karmapunkte
</span>
</span>
<div
className="ms-5 w-[100%] bg-gradient-to-r from-green-900 to-green-500 rounded-full h-6 flex items-center justify-center text-white text-sm font-medium">
16 / 16
</div>
</div>
<div className="w-[100%] flex pt-2">
<span className="w-[10%] relative group cursor-help">
SP
<span
@@ -131,9 +148,9 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
</span>
</span>
<div className="w-[90%] flex items-center gap-2">
<div className="rounded-full w-5 h-5 bg-violet-400"></div>
<div className="rounded-full w-5 h-5 bg-violet-400"></div>
<div className="rounded-full w-5 h-5 bg-violet-400"></div>
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
<div className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"></div>
</div>
</div>
</div>