| 28 | }; |
| 29 | |
| 30 | function ChannelSelectRow(props: ChannelSelectProps) { |
| 31 | const ChannelSelect = ({ channel }: { channel: ChannelPublicWithFlags }) => { |
| 32 | const selected = props.selectedChannel.id === channel.id; |
| 33 | return ( |
| 34 | <LinkButton |
| 35 | variant={selected ? 'secondary' : 'outline'} |
| 36 | className="max-w-[200px] flex-shrink-0 lg:max-w-[300px]" |
| 37 | href={ |
| 38 | props.tenant |
| 39 | ? `/c/${channel.id}` |
| 40 | : `/c/${channel.serverId}/${channel.id}` |
| 41 | } |
| 42 | > |
| 43 | <ChannelName channel={channel} /> |
| 44 | </LinkButton> |
| 45 | ); |
| 46 | }; |
| 47 | |
| 48 | if (props.channels.length == 1) { |
| 49 | return null; |
| 50 | } |
| 51 | return ( |
| 52 | <div |
| 53 | className={cn( |
| 54 | 'channel-row flex w-full shrink-0 flex-row gap-2 overflow-x-scroll text-left', |
| 55 | props.channels.length > 6 ? 'pb-2' : null, |
| 56 | )} |
| 57 | style={{ |
| 58 | scrollbarWidth: 'auto', // For Firefox |
| 59 | WebkitOverflowScrolling: 'touch', // Smooth scrolling on iOS |
| 60 | }} |
| 61 | > |
| 62 | <style> |
| 63 | {` |
| 64 | .channel-row::-webkit-scrollbar { |
| 65 | height: 6px; /* Adjust height if necessary */ |
| 66 | } |
| 67 | |
| 68 | .channel-row::-webkit-scrollbar-thumb { |
| 69 | background-color: #888; /* Customize scrollbar thumb color */ |
| 70 | border-radius: 4px; /* Optional: For rounded corners */ |
| 71 | } |
| 72 | |
| 73 | .channel-row::-webkit-scrollbar-thumb:hover { |
| 74 | background-color: #555; /* Customize hover state */ |
| 75 | } |
| 76 | `} |
| 77 | </style> |
| 78 | {props.channels.map((channel) => ( |
| 79 | <ChannelSelect channel={channel} key={channel.id} /> |
| 80 | ))} |
| 81 | </div> |
| 82 | ); |
| 83 | } |
| 84 | |
| 85 | const PageSwitcher = (props: { |
| 86 | numQuestions: number; |