Function VTabBarPreviewInner

frontend/preview/previews/vtabbar.preview.tsx:33–127

({ platform, setPlatform }: VTabBarPreviewInnerProps)

};

function VTabBarPreviewInner({ platform, setPlatform }: VTabBarPreviewInnerProps) {
    const env = useWaveEnv<VTabBarEnv>();
    const loadBadgesEnv = useWaveEnv<LoadBadgesEnv>();
    const [hideAiButton, setHideAiButton] = useState(false);
    const [isFullScreen, setIsFullScreen] = useAtom(env.atoms.isFullScreen);
    const [fullConfig, setFullConfig] = useAtom(env.atoms.fullConfigAtom);
    const [updaterStatus, setUpdaterStatus] = useAtom(env.atoms.updaterStatusAtom);
    const [width, setWidth] = useState<number>(220);
    const workspace = useAtomValue(env.wos.getWaveObjectAtom<Workspace>(`workspace:${TabBarMockWorkspaceId}`));

    useEffect(() => {
        loadBadges(loadBadgesEnv);
    }, []);

    useEffect(() => {
        setFullConfig((prev) => ({
            ...(prev ?? ({} as FullConfigType)),
            settings: {
                ...(prev?.settings ?? {}),
                "app:hideaibutton": hideAiButton,
            },
        }));
    }, [hideAiButton, setFullConfig]);

    return (
        <div className="flex w-full flex-col gap-6">
            <div className="grid gap-4 rounded-md border border-border bg-panel p-4 md:grid-cols-3 mx-6 mt-6">
                <label className="flex flex-col gap-2 text-xs text-muted">
                    <span>Platform</span>
                    <select
                        value={platform}
                        onChange={(event) => setPlatform(event.target.value as NodeJS.Platform)}
                        className="rounded border border-border bg-background px-2 py-1 text-foreground cursor-pointer"
                    >
                        <option value={PlatformMacOS}>macOS</option>
                        <option value={PlatformWindows}>Windows</option>
                        <option value={PlatformLinux}>Linux</option>
                    </select>
                </label>
                <label className="flex flex-col gap-2 text-xs text-muted">
                    <span>Updater banner</span>
                    <select
                        value={updaterStatus}
                        onChange={(event) => setUpdaterStatus(event.target.value as UpdaterStatus)}
                        className="rounded border border-border bg-background px-2 py-1 text-foreground"
                    >
                        <option value="up-to-date">Hidden</option>
                        <option value="ready">Update Available</option>
                        <option value="downloading">Downloading</option>
                        <option value="installing">Installing</option>
                        <option value="error">Error</option>
                    </select>
                </label>
                <label className="flex flex-col gap-2 text-xs text-muted">
                    <span>Width: {width}px</span>
                    <input
                        type="range"
                        min={110}