naturvardarna/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updatable notification

Browse Source
This commit is contained in:
WilliamSoderberg
2026-05-07 13:26:23 +02:00 Verified
parent f3f5a0c353
commit ddd271fa89
7 changed files with 1245 additions and 1150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ui/SectionCard.tsx
+27 -36
View File
@@ -1,12 +1,12 @@
// app/components/ui/SectionCard.tsx
import React, { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
interface SectionCardProps {
title: string;
icon?: LucideIcon;
children: ReactNode;
children?: ReactNode;
description?: ReactNode;
variant?: 'default' | 'alert' | 'highlight';
className?: string;
@@ -21,65 +21,56 @@ export function SectionCard({
className = ""
}: SectionCardProps) {
// Define base styles for the card container
let cardStyle = "rounded-3xl shadow-sm transition-all duration-300 ";
let headerStyle = "text-xl font-black uppercase tracking-widest mb-4 flex items-center ";
let cardStyle = "rounded-3xl shadow-sm transition-all duration-300 p-6 md:p-8 hover:shadow-md ";
let headerStyle = "text-xl font-black uppercase tracking-widest flex items-center ";
let iconStyle = "mr-3 shrink-0 ";
let descStyle = "text-sm mb-6 leading-relaxed ";
let descStyle = "text-sm leading-relaxed ";
// Apply specific styles based on the chosen variant
switch (variant) {
case 'alert':
cardStyle += "bg-emergency/10 border-2 border-emergency/30 p-6 md:p-8 hover:shadow-md";
cardStyle += "bg-emergency/10 backdrop-blur-md border-2 border-emergency/30";
headerStyle += "text-emergency";
iconStyle += "text-emergency";
descStyle += "text-emergency/90 font-bold";
break;
case 'highlight':
cardStyle += "bg-goldenrod/30 border border-goldenrod/20 p-5";
headerStyle += "text-sm text-goldenrod mb-1";
iconStyle += "text-goldenrod mt-0.5";
descStyle += "text-ebony font-medium m-0";
cardStyle += "bg-goldenrod/30 backdrop-blur-md border border-goldenrod/20";
headerStyle += "text-goldenrod";
iconStyle += "text-goldenrod";
descStyle += "text-ebony font-medium";
break;
case 'default':
default:
cardStyle += "bg-white/40 backdrop-blur-md border border-white/40 p-6 md:p-8 hover:shadow-md";
cardStyle += "bg-white/40 backdrop-blur-md border border-white/40";
headerStyle += "text-ebony";
iconStyle += "text-slate-teal";
descStyle += "text-ebony/80 font-medium";
break;
}
const hasChildren = React.Children.toArray(children).length > 0;
return (
<section className={`${cardStyle} ${className}`}>
<div className={variant === 'highlight' ? 'flex items-start' : ''}>
{variant === 'highlight' && Icon && (
<Icon className={iconStyle} size={24} />
)}
<div className={variant === 'highlight' ? 'flex-1' : ''}>
<h2 className={headerStyle}>
{variant !== 'highlight' && Icon && <Icon className={iconStyle} size={24} />}
{title}
</h2>
<h2 className={`${headerStyle} ${(description || hasChildren) ? 'mb-4' : 'mb-0'}`}>
{Icon && <Icon className={iconStyle} size={24} />}
{title}
</h2>
{description && (
<div className={descStyle}>
{description}
</div>
)}
{variant === 'highlight' ? (
<div className="text-sm font-medium leading-relaxed text-ebony">
{children}
</div>
) : (
children
)}
{description && (
<div className={`${descStyle} ${hasChildren ? 'mb-6' : 'mb-0'}`}>
{description}
</div>
</div>
)}
{hasChildren && (
<div className={variant === 'highlight' ? "text-sm font-medium leading-relaxed text-ebony" : ""}>
{children}
</div>
)}
</section>
);
}