Refactor Card component to use 'hoverable' prop instead of 'hover'; simplify class handling in Badge, Button, and Card components for cleaner code; update Home page cards for consistency and improved styling.
This commit is contained in:
parent
97061f2353
commit
0beb20635f
4 changed files with 19 additions and 48 deletions
|
|
@ -4,14 +4,12 @@ interface BadgeProps {
|
|||
children: ReactNode;
|
||||
variant?: 'gray' | 'green' | 'yellow' | 'red' | 'blue' | 'glass';
|
||||
border?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Badge({
|
||||
children,
|
||||
variant = 'gray',
|
||||
border = false,
|
||||
className = ''
|
||||
}: BadgeProps) {
|
||||
const baseClasses = "rounded-full px-2 py-0.5 text-sm";
|
||||
|
||||
|
|
@ -26,7 +24,7 @@ export default function Badge({
|
|||
|
||||
return (
|
||||
<span
|
||||
className={` ${border?"border":""} ${baseClasses} ${variantClasses[variant]} ${className}`}
|
||||
className={` ${border?"border":""} ${baseClasses} ${variantClasses[variant]}`}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,12 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|||
children: ReactNode;
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'glass';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Button({
|
||||
children,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
className = '',
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
|
||||
|
|
@ -32,8 +29,7 @@ export default function Button({
|
|||
|
||||
return (
|
||||
<button
|
||||
className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
|
||||
{...props}
|
||||
className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,13 @@ import { ReactNode } from 'react';
|
|||
|
||||
interface CardProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
variant?: 'default' | 'glass' | 'outlined';
|
||||
hover?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
hoverable?: boolean;
|
||||
}
|
||||
|
||||
export default function Card({
|
||||
children,
|
||||
className = '',
|
||||
variant = 'default',
|
||||
hover = false,
|
||||
style
|
||||
}: CardProps) {
|
||||
const baseClasses = "relative overflow-hidden rounded-xl transition-all duration-300 ease-out";
|
||||
|
||||
|
|
@ -23,17 +18,9 @@ export default function Card({
|
|||
outlined: "bg-transparent border-2 border-gray-700/50"
|
||||
};
|
||||
|
||||
const hoverClasses = hover
|
||||
? "hover:scale-[1.02] hover:shadow-2xl hover:shadow-blue-500/10 hover:border-blue-500/30"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${hoverClasses} ${className}`}
|
||||
style={{
|
||||
willChange: 'transform',
|
||||
...style
|
||||
}}
|
||||
className={`${baseClasses} ${variantClasses[variant]}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
@ -42,12 +29,11 @@ export default function Card({
|
|||
|
||||
interface CardHeaderProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardHeader({ children, className = '' }: CardHeaderProps) {
|
||||
export function CardHeader({ children }: CardHeaderProps) {
|
||||
return (
|
||||
<div className={`p-6 pb-0 ${className}`}>
|
||||
<div className={`p-6 pb-0`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -55,12 +41,11 @@ export function CardHeader({ children, className = '' }: CardHeaderProps) {
|
|||
|
||||
interface CardContentProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardContent({ children, className = '' }: CardContentProps) {
|
||||
export function CardContent({ children }: CardContentProps) {
|
||||
return (
|
||||
<div className={`p-6 pb-4 ${className}`}>
|
||||
<div className={`p-6 pb-4`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -68,12 +53,11 @@ export function CardContent({ children, className = '' }: CardContentProps) {
|
|||
|
||||
interface CardFooterProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CardFooter({ children, className = '' }: CardFooterProps) {
|
||||
export function CardFooter({ children }: CardFooterProps) {
|
||||
return (
|
||||
<div className={`p-6 pt-8 ${className}`}>
|
||||
<div className={`p-6 pt-8`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
25
app/page.tsx
25
app/page.tsx
|
|
@ -8,47 +8,42 @@ export default function Home() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card
|
||||
variant="glass"
|
||||
className="float"
|
||||
hover
|
||||
hoverable
|
||||
>
|
||||
<CardHeader>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Über mich</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ex, labore deleniti fuga repellendus maiores rerum, voluptates dicta accusamus nihil quibusdam dolorum dolor illo et corrupti doloremque velit itaque repudiandae!
|
||||
</p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ex, labore deleniti fuga repellendus maiores rerum, voluptates dicta accusamus nihil quibusdam dolorum dolor illo et corrupti doloremque velit itaque repudiandae!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
variant="default"
|
||||
className="float"
|
||||
hover
|
||||
style={{ animationDelay: '1s' }}
|
||||
hoverable
|
||||
>
|
||||
<CardHeader>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Aktuelle Beschäftigung</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere similique iusto beatae minima ea. Explicabo voluptatem itaque unde sequi, aperiam, dicta nulla nobis maiores, debitis aliquam corrupti quam earum dolor!
|
||||
</p></CardContent>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere similique iusto beatae minima ea. Explicabo voluptatem itaque unde sequi, aperiam, dicta nulla nobis maiores, debitis aliquam corrupti quam earum dolor!
|
||||
</p></CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
variant="outlined"
|
||||
className="float"
|
||||
hover
|
||||
style={{ animationDelay: '2s' }}
|
||||
hoverable
|
||||
>
|
||||
<CardHeader>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Erfahrung</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio neque natus quibusdam? Corrupti reprehenderit nisi repellendus facere, reiciendis, rerum, error iusto doloribus asperiores sapiente alias repellat autem? Earum, possimus?
|
||||
</p></CardContent>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio neque natus quibusdam? Corrupti reprehenderit nisi repellendus facere, reiciendis, rerum, error iusto doloribus asperiores sapiente alias repellat autem? Earum, possimus?
|
||||
</p></CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
|
|
@ -150,7 +145,6 @@ export default function Home() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card
|
||||
variant="glass"
|
||||
className="hover:neon-glow"
|
||||
>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold text-white">Raytracing in a Weekend</h3>
|
||||
|
|
@ -173,7 +167,6 @@ export default function Home() {
|
|||
|
||||
<Card
|
||||
variant="glass"
|
||||
className="hover:neon-glow"
|
||||
>
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold text-white">6502 Emulator</h3>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue