mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
870bfc58ee
* feat: Add reusable UI components and fix GitHub repository display * style: Fix linting issues in UI components * fix: Add close icon to GitHub Connection Required dialog * fix: Add CloseButton component to fix white background issue in dialog close icons * Fix close button styling in dialog components to address ghost white issue in dark mode * fix: update icon color to tertiary for consistency The icon color was changed from `text-bolt-elements-icon-info` to `text-bolt-elements-icon-tertiary` * fix: improve repository selection dialog tab styling for dark mode - Update tab menu styling to prevent white background in dark mode - Use explicit color values for better dark/light mode compatibility - Improve hover and active states for better visual hierarchy - Remove unused Tabs imports --------- Co-authored-by: KevIsDev <zennerd404@gmail.com>
101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { classNames } from '~/utils/classNames';
|
|
|
|
// Predefined gradient colors
|
|
const GRADIENT_COLORS = [
|
|
'from-purple-500/10 to-blue-500/5',
|
|
'from-blue-500/10 to-cyan-500/5',
|
|
'from-cyan-500/10 to-green-500/5',
|
|
'from-green-500/10 to-yellow-500/5',
|
|
'from-yellow-500/10 to-orange-500/5',
|
|
'from-orange-500/10 to-red-500/5',
|
|
'from-red-500/10 to-pink-500/5',
|
|
'from-pink-500/10 to-purple-500/5',
|
|
];
|
|
|
|
interface GradientCardProps {
|
|
/** Custom gradient class (overrides seed-based gradient) */
|
|
gradient?: string;
|
|
|
|
/** Seed string to determine gradient color */
|
|
seed?: string;
|
|
|
|
/** Whether to apply hover animation effect */
|
|
hoverEffect?: boolean;
|
|
|
|
/** Whether to apply border effect */
|
|
borderEffect?: boolean;
|
|
|
|
/** Card content */
|
|
children: React.ReactNode;
|
|
|
|
/** Additional class name */
|
|
className?: string;
|
|
|
|
/** Additional props */
|
|
[key: string]: any;
|
|
}
|
|
|
|
/**
|
|
* GradientCard component
|
|
*
|
|
* A card with a gradient background that can be determined by a seed string.
|
|
*/
|
|
export function GradientCard({
|
|
gradient,
|
|
seed,
|
|
hoverEffect = true,
|
|
borderEffect = true,
|
|
className,
|
|
children,
|
|
...props
|
|
}: GradientCardProps) {
|
|
// Get gradient color based on seed or use provided gradient
|
|
const gradientClass = gradient || getGradientColorFromSeed(seed);
|
|
|
|
// Animation variants for hover effect
|
|
const hoverAnimation = hoverEffect
|
|
? {
|
|
whileHover: {
|
|
scale: 1.02,
|
|
y: -2,
|
|
transition: { type: 'spring', stiffness: 400, damping: 17 },
|
|
},
|
|
whileTap: { scale: 0.98 },
|
|
}
|
|
: undefined;
|
|
|
|
return (
|
|
<motion.div
|
|
className={classNames(
|
|
'p-5 rounded-xl bg-gradient-to-br',
|
|
gradientClass,
|
|
borderEffect
|
|
? 'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40'
|
|
: '',
|
|
'transition-all duration-300 shadow-sm',
|
|
hoverEffect ? 'hover:shadow-md' : '',
|
|
className,
|
|
)}
|
|
{...hoverAnimation}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Calculate a gradient color based on the seed string for visual variety
|
|
*/
|
|
function getGradientColorFromSeed(seedString?: string): string {
|
|
if (!seedString) {
|
|
return GRADIENT_COLORS[0];
|
|
}
|
|
|
|
const index = seedString.length % GRADIENT_COLORS.length;
|
|
|
|
return GRADIENT_COLORS[index];
|
|
}
|