18 lines
1.1 KiB
TypeScript
18 lines
1.1 KiB
TypeScript
import { useChannels } from '@/store/channels';
|
|
import { useAccount } from '@/store/account';
|
|
import { channelPath, navigate } from '@/app/navigation';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import styles from './ThreadSidebar.module.css';
|
|
|
|
export function ChannelSwitcher({ id, onCreate }: { id?: string; onCreate: () => void }) {
|
|
const channels = useChannels((s) => s.list);
|
|
const username = useAccount((s) => s.username);
|
|
return <section className={styles.panel} aria-label="我的空间导航">
|
|
<div className={styles.heading}><strong>空间</strong><Button variant="ghost" icon="edit" label="新建空间" disabled={!username} onClick={onCreate} /></div>
|
|
<nav className={styles.channels} aria-label="空间列表">{channels.map((channel) => <button key={channel.id} type="button"
|
|
className={`${styles.thread} ${channel.id === id ? styles.selected : ''}`} aria-current={channel.id === id ? 'page' : undefined}
|
|
onClick={() => navigate(channelPath(channel.id))}><Icon name={channel.mode === 'enc' ? 'lock' : 'file'} size={14} /><span>{channel.name || channel.id.slice(0, 8)}</span></button>)}</nav>
|
|
</section>;
|
|
}
|