Refactor SheetHeader styles and layout: adjust attribute card design, improve responsiveness, and streamline conditional rendering logic.
This commit is contained in:
@@ -114,51 +114,49 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center py-3 px-10">
|
||||
<div className="w-[20%] h-[20%] rounded-full overflow-hidden">
|
||||
<img src="#" alt="char bild"/>
|
||||
<div className="flex justify-between items-center py-5 px-5 gap-6">
|
||||
<div className="w-[30%] h-full rounded-md bg-gray-600 overflow-hidden"
|
||||
style={{height: '12.5em', width: '9.375em'}}>
|
||||
<img src="#" alt="char bild" className="object-cover w-full h-full"/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 w-[80%]">
|
||||
<div className="flex justify-between">
|
||||
<div className="w-[70%] flex flex-col gap-2 w-[80%]">
|
||||
<div className="w-[100%] flex justify-between">
|
||||
{attributes.map(attr => (
|
||||
<div key={attr.id} className="w-[10%] text-center">
|
||||
<div className="relative group cursor-help">
|
||||
<div className="font-bold">{attr.short}</div>
|
||||
<div key={attr.id} className="">
|
||||
<div className="relative group cursor-help flex items-center justify-center">
|
||||
<div>{attr.short}</div>
|
||||
<span
|
||||
className="absolute left-1/2 transform -translate-x-1/2 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-1/2 transform -translate-x-1/2 bottom-full bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
|
||||
{attr.name}
|
||||
</span>
|
||||
</div>
|
||||
<div>{attr.value}</div>
|
||||
<span className="font-bold" style={{fontSize: '1.5em'}}>{attr.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{jsonData.attr.lp && (
|
||||
<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 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-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
|
||||
</div>
|
||||
</div>
|
||||
<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 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-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{jsonData.attr.ae > 0 && (
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<span className="relative group cursor-help">
|
||||
AP
|
||||
<span
|
||||
@@ -166,21 +164,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
|
||||
Astralpunkte
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{jsonData.attr.kp > 0 && (
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<span className="relative group cursor-help">
|
||||
KP
|
||||
<span
|
||||
@@ -188,21 +184,19 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
|
||||
Karmapunkte
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
|
||||
style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
|
||||
{jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{jsonData.attr.sp > 0 && (
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<div className="w-[100%] flex pt-2">
|
||||
<span className="relative group cursor-help">
|
||||
SP
|
||||
<span
|
||||
@@ -210,22 +204,21 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
|
||||
Schicksalspunkte
|
||||
</span>
|
||||
</span>
|
||||
<div className="ms-5 w-[100%] flex items-center gap-2">
|
||||
{Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => (
|
||||
<div
|
||||
key={`sp-available-${index}`}
|
||||
className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"
|
||||
/>
|
||||
))}
|
||||
{Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => (
|
||||
<div
|
||||
key={`sp-lost-${index}`}
|
||||
className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="ms-5 w-[100%] flex items-center gap-2">
|
||||
{Array.from({length: jsonData.attr.sp - jsonData.attr.permanentSP.lost}, (_, index) => (
|
||||
<div
|
||||
key={`sp-available-${index}`}
|
||||
className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"
|
||||
/>
|
||||
))}
|
||||
{Array.from({length: jsonData.attr.permanentSP.lost}, (_, index) => (
|
||||
<div
|
||||
key={`sp-lost-${index}`}
|
||||
className="rounded-full w-5 h-5 bg-gradient-to-br from-gray-700 to-gray-500"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user