Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-05 04:19:02 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(SelectAgentModelButton): replace styled-components with tailwind classes

Browse Source 
Simplify component styling by removing styled-components in favor of tailwind utility classes
This commit is contained in:
icarus 2025-09-26 04:11:48 +08:00
parent fab1d29c83
commit f4e4586fbc
1 changed files with 6 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/src/pages/home/components/SelectAgentModelButton.tsx
View File

@ -8,7 +8,6 @@ import { apiModelAdapter } from '@renderer/utils/model'
import { ChevronsUpDown } from 'lucide-react' import { ChevronsUpDown } from 'lucide-react'
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
interface Props { interface Props {
agent: AgentEntity agent: AgentEntity
@ -33,38 +32,16 @@ const SelectAgentModelButton: FC<Props> = ({ agent, model }) => {
const providerName = model.provider_name const providerName = model.provider_name
return ( return (
<DropdownButton size="sm" onPress={onSelectModel}> <Button size="sm" variant="light" className="nodrag rounded-2xl px-1 py-3" onPress={onSelectModel}>
<ButtonContent> <div className="flex items-center gap-1.5">
<ModelAvatar model={apiModelAdapter(model)} size={20} /> <ModelAvatar model={apiModelAdapter(model)} size={20} />
<ModelName> <span className="-mr-0.5 font-medium">
{model ? model.name : t('button.select_model')} {providerName ? ' | ' + providerName : ''} {model ? model.name : t('button.select_model')} {providerName ? ' | ' + providerName : ''}
</ModelName> </span>
</ButtonContent> </div>
<ChevronsUpDown size={14} color="var(--color-icon)" /> <ChevronsUpDown size={14} color="var(--color-icon)" />
</DropdownButton> </Button>
) )
} }
const DropdownButton = styled(Button)`
font-size: 11px;
border-radius: 15px;
padding: 13px 5px;
-webkit-app-region: none;
box-shadow: none;
background-color: transparent;
border: 1px solid transparent;
margin-top: 1px;
`
const ButtonContent = styled.div`
display: flex;
align-items: center;
gap: 6px;
`
const ModelName = styled.span`
font-weight: 500;
margin-right: -2px;
`
export default SelectAgentModelButton export default SelectAgentModelButton