Pepe44DEV/Papo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify heroui layouts and add sonarqube workflow
Some checks failed
Deploy Discord Bot / deploy (push) Has been cancelled
Details
SonarQube / sonar (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Pepe44DEV
2026-07-01 15:46:04 +02:00
parent da72f49255
commit a604fb494f
10 changed files with 237 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/shared/ActivityTile.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardContent } from '@heroui/react';
import { Card, CardContent, Chip } from '@heroui/react';
import type { ReactNode } from 'react';
type Props = {
@@ -9,14 +9,13 @@ type Props = {
export function ActivityTile({ icon, label, value }: Props) {
return (
<Card className="border border-default-100 bg-default-50/20">
<Card>
<CardContent className="flex flex-row items-center justify-between gap-4 p-4">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
{icon}
</div>
<Chip color="primary" size="sm" variant="flat" startContent={icon}>
{label}
</Chip>
<div>
<div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
<div className="text-2xl font-black">{value}</div>
</div>
</div>

10
frontend/src/components/shared/FormPanel.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardHeader, CardContent } from '@heroui/react';
import { Card, CardHeader, CardContent, CardTitle } from '@heroui/react';
import type { ReactNode } from 'react';
type Props = {
@@ -8,11 +8,11 @@ type Props = {
export function FormPanel({ title, children }: Props) {
return (
<Card className="border border-default-100 bg-default-50/20">
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">{title}</h3>
<Card>
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 px-5 py-5">{children}</CardContent>
<CardContent className="flex flex-col gap-4">{children}</CardContent>
</Card>
);
}

10
frontend/src/components/shared/ListPanel.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardHeader, CardContent } from '@heroui/react';
import { Card, CardHeader, CardContent, CardTitle } from '@heroui/react';
import type { ReactNode } from 'react';
type Props = {
@@ -9,11 +9,11 @@ type Props = {
export function ListPanel({ title, children, className }: Props) {
return (
<Card className={`border border-default-100 bg-default-50/20 ${className ?? ''}`}>
<CardHeader className="px-5 pt-5 pb-0">
<h3 className="text-base font-semibold">{title}</h3>
<Card className={className ?? ''}>
<CardHeader>
<CardTitle>{title}</CardTitle>
</CardHeader>
<CardContent className="px-5 py-5">
<CardContent>
{children}
</CardContent>
</Card>

6
frontend/src/components/shared/SectionCard.tsx
View File

@@ -10,15 +10,15 @@ type Props = {
export function SectionCard({ title, subtitle, children, action }: Props) {
return (
<Card className="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
<CardHeader className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
<Card>
<CardHeader className="flex items-start justify-between gap-4">
<div className="min-w-0 flex flex-col gap-1">
<CardTitle>{title}</CardTitle>
{subtitle && <CardDescription>{subtitle}</CardDescription>}
</div>
{action && <div className="shrink-0">{action}</div>}
</CardHeader>
<CardContent className="px-6 py-5">{children}</CardContent>
<CardContent>{children}</CardContent>
</Card>
);
}

14
frontend/src/components/shared/StatCard.tsx
View File

@@ -1,4 +1,4 @@
import { Card, CardContent } from '@heroui/react';
import { Card, CardContent, Chip } from '@heroui/react';
import type { ReactNode } from 'react';
type Props = {
@@ -10,13 +10,15 @@ type Props = {
};
export function StatCard({ icon, label, value, trend, color = 'primary' }: Props) {
const chipColor = color === 'default' ? 'default' : color;
return (
<Card className="border border-default-100 bg-gradient-to-br from-default-50/20 to-background hover:border-default-200 transition-all">
<Card>
<CardContent className="flex flex-col gap-2 p-4">
<div className="flex items-center justify-between">
<div className={`flex size-9 items-center justify-center rounded-xl bg-${color}-500/10 text-${color}-400`}>
{icon}
</div>
<Chip color={chipColor} size="sm" variant="flat" startContent={icon}>
{label}
</Chip>
{trend && (
<span className={`text-tiny font-medium ${trend.startsWith('+') ? 'text-success-400' : trend.startsWith('-') ? 'text-danger-400' : 'text-default-400'}`}>
{trend}
@@ -24,7 +26,7 @@ export function StatCard({ icon, label, value, trend, color = 'primary' }: Props
)}
</div>
<div className="text-2xl font-bold tracking-tight">{value}</div>
<div className="text-tiny uppercase tracking-widest text-default-500">{label}</div>
<div className="text-tiny text-default-500">{label}</div>
</CardContent>
</Card>
);