662879bb5d
* ✨feat: setting responsive * 🧹cleanup: feeback PR * 🧹cleanup: unused className * 🧹cleanup: unused props
72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { useAppearance } from '@/hooks/useAppearance'
|
|
import { cn } from '@/lib/utils'
|
|
import { IconCircleCheckFilled } from '@tabler/icons-react'
|
|
import { useTranslation } from '@/i18n/react-i18next-compat'
|
|
|
|
export function ChatWidthSwitcher() {
|
|
const { chatWidth, setChatWidth } = useAppearance()
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex flex-col sm:flex-row sm:gap-4">
|
|
<button
|
|
className={cn(
|
|
'w-full overflow-hidden border border-main-view-fg/10 rounded-md my-2 pb-2 cursor-pointer ',
|
|
chatWidth === 'compact' && 'border-accent'
|
|
)}
|
|
onClick={() => setChatWidth('compact')}
|
|
>
|
|
<div className="flex items-center justify-between px-4 py-2 bg-main-view-fg/10">
|
|
<span className="font-medium text-xs font-sans">
|
|
{t('common:compactWidth')}
|
|
</span>
|
|
{chatWidth === 'compact' && (
|
|
<IconCircleCheckFilled className="size-4 text-accent" />
|
|
)}
|
|
</div>
|
|
<div className="overflow-auto p-2">
|
|
<div className="flex flex-col px-6 gap-2 mt-2">
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<div className="bg-main-view-fg/10 h-8 px-4 w-full flex-shrink-0 border-none resize-none outline-0 rounded-sm flex items-center truncate">
|
|
<span className="text-main-view-fg/50 line-clamp-1">
|
|
{t('common:placeholder.chatInput')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
className={cn(
|
|
'w-full overflow-hidden border border-main-view-fg/10 rounded-md my-2 pb-2 cursor-pointer',
|
|
chatWidth === 'full' && 'border-accent'
|
|
)}
|
|
onClick={() => setChatWidth('full')}
|
|
>
|
|
<div className="flex items-center justify-between px-4 py-2 bg-main-view-fg/10">
|
|
<span className="font-medium text-xs font-sans">
|
|
{t('common:fullWidth')}
|
|
</span>
|
|
{chatWidth === 'full' && (
|
|
<IconCircleCheckFilled className="size-4 text-accent" />
|
|
)}
|
|
</div>
|
|
<div className="overflow-auto p-2">
|
|
<div className="flex flex-col gap-2 mt-2">
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<Skeleton className="h-2 w-full rounded-full" />
|
|
<div className="bg-main-view-fg/10 h-8 px-4 w-full flex-shrink-0 border-none resize-none outline-0 rounded-sm flex items-center">
|
|
<span className="text-main-view-fg/50">
|
|
{t('common:placeholder.chatInput')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|