ERitors-Scribe-Desktop/components/layout/ScribeTopBar.tsx

const logo = "/eritors-favicon-white.png";
import React, {useContext} from "react";
import {Download, X} from "lucide-react";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {useTranslations} from '@/lib/i18n';
import {useAutoUpdate} from "@/hooks/useAutoUpdate";

export default function ScribeTopBar() {
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const t = useTranslations();
    const update = useAutoUpdate();
    return (
        <div className="flex items-center justify-between px-6 py-3 bg-tertiary border-b border-secondary">
            <div className="flex items-center space-x-4 group">
                <div className="transition-transform duration-300">
                    <img src={logo} alt={t("scribeTopBar.logoAlt")} width={24} height={24}/>
                </div>
                <span
                    className="font-['ADLaM_Display'] text-xl tracking-wide text-text-primary">{t("scribeTopBar.scribe")}</span>
            </div>
            {book && (
                <div
                    className="flex items-center space-x-3 bg-text-primary/10 backdrop-blur-sm px-4 py-2 rounded-lg border border-text-primary/20">
                    <div className="h-8 w-1 bg-text-primary/40 rounded-full"></div>
                    <div className="text-center">
                        <p className="text-text-primary font-semibold text-base tracking-wide">
                            {book.title}
                        </p>
                        {book.subTitle && (
                            <p className="text-text-secondary text-xs italic mt-0.5">
                                {book.subTitle}
                            </p>
                        )}
                    </div>
                    <div className="h-8 w-1 bg-text-primary/40 rounded-full"></div>
                </div>
            )}
            <div className="flex items-center space-x-2 min-w-[120px] justify-end">
                {update.available && (
                    <div className="flex items-center gap-2 bg-primary/15 border border-primary/30 rounded-lg px-3 py-1.5">
                        <span className="text-xs text-text-secondary">v{update.version}</span>
                        <button onClick={update.install} disabled={update.downloading}
                                className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary-light transition-colors">
                            <Download className="w-3.5 h-3.5" strokeWidth={2}/>
                            {update.downloading ? t("scribeTopBar.updating") : t("scribeTopBar.update")}
                        </button>
                        {!update.downloading && (
                            <button onClick={update.dismiss} className="text-text-secondary hover:text-text-primary transition-colors">
                                <X className="w-3.5 h-3.5" strokeWidth={2}/>
                            </button>
                        )}
                    </div>
                )}
            </div>
        </div>
    )
}