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>
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { classNames } from '~/utils/classNames';
|
|
|
|
interface CloseButtonProps {
|
|
onClick?: () => void;
|
|
className?: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
/**
|
|
* CloseButton component
|
|
*
|
|
* A button with an X icon used for closing dialogs, modals, etc.
|
|
* The button has a transparent background and only shows a background on hover.
|
|
*/
|
|
export function CloseButton({ onClick, className, size = 'md' }: CloseButtonProps) {
|
|
const sizeClasses = {
|
|
sm: 'p-1',
|
|
md: 'p-2',
|
|
lg: 'p-3',
|
|
};
|
|
|
|
const iconSizeClasses = {
|
|
sm: 'w-3 h-3',
|
|
md: 'w-4 h-4',
|
|
lg: 'w-5 h-5',
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={classNames(
|
|
'text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark',
|
|
'rounded-lg hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
|
|
'transition-colors duration-200',
|
|
'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
|
|
sizeClasses[size],
|
|
className,
|
|
)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
aria-label="Close"
|
|
>
|
|
<div className={classNames('i-ph:x', iconSizeClasses[size])} />
|
|
</motion.button>
|
|
);
|
|
}
|