mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2025-12-31 16:49:07 +08:00
2e07b4ea58
- Introduced migration status documentation in both English and Chinese to track the progress of the UI component library migration. - Added new UI components including CopyButton, DividerWithText, EmojiIcon, IndicatorLight, Spinner, TextBadge, and various display and icon components. - Updated the index.ts file to export the newly added components for easier access. - Enhanced the directory structure and component classification guidelines for better organization and clarity.
46 lines
992 B
TypeScript
46 lines
992 B
TypeScript
// Original: src/renderer/src/components/Spinner.tsx
|
|
import { motion } from 'framer-motion'
|
|
import { Search } from 'lucide-react'
|
|
import styled from 'styled-components'
|
|
|
|
interface Props {
|
|
text: React.ReactNode
|
|
}
|
|
|
|
// Define variants for the spinner animation
|
|
const spinnerVariants = {
|
|
defaultColor: {
|
|
color: '#2a2a2a'
|
|
},
|
|
dimmed: {
|
|
color: '#8C9296'
|
|
}
|
|
}
|
|
|
|
export default function Spinner({ text }: Props) {
|
|
return (
|
|
<Searching
|
|
variants={spinnerVariants}
|
|
initial="defaultColor"
|
|
animate={['defaultColor', 'dimmed']}
|
|
transition={{
|
|
duration: 0.8,
|
|
repeat: Infinity,
|
|
repeatType: 'reverse',
|
|
ease: 'easeInOut'
|
|
}}>
|
|
<Search size={16} style={{ color: 'unset' }} />
|
|
<span>{text}</span>
|
|
</Searching>
|
|
)
|
|
}
|
|
const SearchWrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
/* font-size: 14px; */
|
|
padding: 0px;
|
|
/* padding-left: 0; */
|
|
`
|
|
const Searching = motion.create(SearchWrapper)
|