tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

Moved to ReactJS

Browse source
This commit is contained in:
Alois 2026-03-14 12:35:30 +01:00
commit 1d0ebeb2b7
100 changed files with 1909 additions and 6056 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/web/src/features/conversation/list/switch.tsx
View file

@ -1,4 +1,4 @@
import { createEffect, createSignal, onMount } from "solid-js";
import * as React from "react";
type Category = "conversations" | "communities";
@ -6,24 +6,27 @@ export default function Switch(props: {
category: Category;
setCategory: (category: Category) => void;
}) {
let conversationsRef: HTMLButtonElement | undefined;
let communitiesRef: HTMLButtonElement | undefined;
const conversationsRef = React.useRef<HTMLButtonElement | null>(null);
const communitiesRef = React.useRef<HTMLButtonElement | null>(null);
const [indicator, setIndicator] = createSignal({ left: 0, width: 0 });
const [indicator, setIndicator] = React.useState({ left: 0, width: 0 });
function updateIndicator() {
const updateIndicator = React.useCallback(() => {
const active =
props.category === "conversations" ? conversationsRef : communitiesRef;
props.category === "conversations"
? conversationsRef.current
: communitiesRef.current;
if (!active) return;
setIndicator({
left: active.offsetLeft,
width: active.offsetWidth,
});
}
}, [props.category]);
onMount(updateIndicator);
createEffect(updateIndicator);
React.useLayoutEffect(() => {
updateIndicator();
}, [updateIndicator]);
function toggleCategory() {
props.setCategory(
@ -34,20 +37,20 @@ export default function Switch(props: {
return (
<div
role="tablist"
class="border relative inline-flex rounded-full bg-card p-1 select-none"
className="border relative inline-flex rounded-full bg-card p-1 select-none"
>
<div
class="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
className="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
style={{
left: `${indicator().left}px`,
width: `${indicator().width}px`,
left: `${indicator.left}px`,
width: `${indicator.width}px`,
}}
/>
<button
ref={(el) => (conversationsRef = el)}
ref={conversationsRef}
role="tab"
aria-selected={props.category === "conversations"}
class={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
props.category === "conversations"
? "text-foreground"
: "text-ring/50 hover:text-ring"
@ -57,10 +60,10 @@ export default function Switch(props: {
Conversations
</button>
<button
ref={(el) => (communitiesRef = el)}
ref={communitiesRef}
role="tab"
aria-selected={props.category === "communities"}
class={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
props.category === "communities"
? "text-foreground"
: "text-ring/50 hover:text-ring"
@ -71,4 +74,4 @@ export default function Switch(props: {
</button>
</div>
);
}
}