TuringToken/web/src/components/common/ui/Card.jsx

99 lines
2.5 KiB
JavaScript

/*
Copyright (C) 2025 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import React from 'react';
import clsx from 'clsx';
const Card = React.forwardRef(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={clsx(
'rounded-lg border border-border bg-card text-card-foreground shadow-sm',
className,
)}
{...props}
>
{children}
</div>
));
Card.displayName = 'Card';
const CardHeader = React.forwardRef(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={clsx('flex flex-col space-y-1.5 p-6', className)}
{...props}
>
{children}
</div>
));
CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef(({ className, children, ...props }, ref) => (
<h3
ref={ref}
className={clsx(
'text-2xl font-semibold leading-none tracking-tight',
className,
)}
{...props}
>
{children}
</h3>
));
CardTitle.displayName = 'CardTitle';
const CardDescription = React.forwardRef(
({ className, children, ...props }, ref) => (
<p
ref={ref}
className={clsx('text-sm text-muted-foreground', className)}
{...props}
>
{children}
</p>
)
);
CardDescription.displayName = 'CardDescription';
const CardContent = React.forwardRef(
({ className, children, ...props }, ref) => (
<div ref={ref} className={clsx('p-6 pt-0', className)} {...props}>
{children}
</div>
)
);
CardContent.displayName = 'CardContent';
const CardFooter = React.forwardRef(
({ className, children, ...props }, ref) => (
<div
ref={ref}
className={clsx('flex items-center p-6 pt-0', className)}
{...props}
>
{children}
</div>
)
);
CardFooter.displayName = 'CardFooter';
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
export default Card;