@c-rex/templates 0.1.28 → 0.1.30

package/src/articles/wrapper.tsx

@@ -1,216 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react";
-import { SidebarTrigger } from "@c-rex/ui/sidebar";
-import { LeftSidebar } from "@c-rex/components/left-sidebar";
-import { RightSidebar } from "@c-rex/components/right-sidebar";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { RenderArticle } from "@c-rex/components/render-article";
-import { articleInfoItemType, DocumentsType } from "@c-rex/types";
-import { AvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
-import { Separator } from "@c-rex/ui/separator";
-import { ArrowBigLeft, PanelRight, ArrowBigRight, FileSearchIcon, X, Search } from "lucide-react";
-import { SearchInput } from "../../../components/src/search-input";
-
-import { useMultiSidebar } from "@c-rex/ui/sidebar";
-import { Button } from "@c-rex/ui/button";
-import { useQueryState } from "nuqs";
-import { cn } from "@c-rex/utils";
-import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useHighlightStore } from "@c-rex/components/highlight-store";
-import { useTranslations } from "next-intl";
-import { FavoriteButton } from "@c-rex/components/favorite-button";
-import { RESULT_TYPES } from "@c-rex/constants";
-import { useFavoritesStore } from "@c-rex/components/favorites-store";
-
-type articleType = keyof typeof RESULT_TYPES;
-
-type Props = {
-    documentLang: string,
-    articleLang: string,
-    articleAvailableVersions: AvailableVersionsInterface[],
-    documentAvailableVersions: AvailableVersionsInterface[],
-
-    htmlContent: string,
-
-    articleInfo: articleInfoItemType[],
-    documentInfo: articleInfoItemType[],
-
-    documents: DocumentsType,
-    loading: boolean
-    breadcrumbItems: TreeOfContent[],
-    treeOfContent: TreeOfContent[],
-    id: string,
-    type: articleType,
-    documentId: string
-}
-
-export const ArticleWrapper = ({
-    htmlContent,
-    documents,
-    documentLang,
-    articleLang,
-    articleAvailableVersions,
-    documentAvailableVersions,
-    loading,
-    treeOfContent,
-    documentInfo,
-    articleInfo,
-    breadcrumbItems,
-    id,
-    type,
-    documentId
-}: Props) => {
-    const t = useTranslations();
-    const inputRef = useRef<HTMLInputElement>(null);
-    const { next, prev } = useHighlight();
-    const [open, setOpen] = useState(false);
-    const enableHighlight = useHighlightStore((state) => state.enable);
-    const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
-    const { rightSidebar } = useMultiSidebar()
-    const [query, setQuery] = useQueryState("q");
-
-    useEffect(() => {
-        if (open && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [open]);
-
-    return (
-        <div className="flex w-full">
-            <LeftSidebar
-                lang={documentLang}
-                data={treeOfContent}
-                loading={loading}
-                side="left"
-            />
-            <div className="flex-1 p-4">
-                <header className="flex h-12 gap-2 items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <SidebarTrigger side="left" />
-                        <Separator
-                            orientation="vertical"
-                            className="data-[orientation=vertical]:h-4 hidden sm:block"
-                        />
-                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
-                    </div>
-
-                    <SearchInput showInput={true} showPkgFilter={true} placedOn="BODY" />
-                    {!loading &&
-                        <div className="flex flex-row">
-                            <FavoriteButton id={id} type={type} label={breadcrumbItems[breadcrumbItems.length - 1]!.label} />
-                        </div>
-                    }
-                </header>
-
-                <div className="pr-4 relative">
-                    <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
-
-                    {/*
-                        <div className="absolute top-0 right-0 flex flex-col gap-2 items-end">
-                            {favoritesList.map((item) => (
-                                <div
-                                    key={item.id}
-                                    className={cn(
-                                        "group h-8 cursor-pointer w-4 hover:w-40 transition-all duration-300 relative",
-                                        `bg-${item.color}`,
-                                        item.id == id ? "rounded-r-sm" : "rounded-sm"
-                                    )}
-                                >
-                                    {item.id == id && (
-                                        <div className={cn(
-                                            "absolute -left-[16px] top-1/2 -translate-y-1/2 h-8 border-t-[16px] border-t-transparent border-b-[16px] border-b-transparent border-r-[16px]",
-                                            `border-r-${item.color}`,
-                                        )} />
-                                    )}
-                                    <a
-                                        href={`../topics/${item.id}`}
-                                        className="flex items-center justify-end h-8 opacity-0 group-hover:opacity-100 text-primary-foreground transition-all duration-300 text-right px-2"
-                                    >
-                                        <span
-                                            className="text-right text-ellipsis overflow-hidden whitespace-nowrap"
-                                            title={item.label}
-                                        >
-                                            {item.label}
-                                        </span>
-                                    </a>
-                                </div>
-                            ))}
-                        </div>
-                    */}
-                </div>
-
-                <div className="w-full sm:w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">
-                    {enableHighlight && (
-
-                        <>
-                            <div className="flex items-center">
-                                <input
-                                    type="text"
-                                    value={query as string || ""}
-                                    ref={inputRef}
-                                    onKeyDown={(e) => {
-                                        if (e.key === "Enter") {
-                                            next();
-                                        }
-                                    }}
-
-                                    onChange={(e) => setQuery(e.target.value || null)}
-
-                                    placeholder={t("search")}
-                                    className={cn(
-                                        "border border-gray-300 rounded left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
-                                        open ? "w-48 opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
-                                    )}
-                                />
-
-                                <Button
-                                    variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}
-                                >
-                                    {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
-                                </Button>
-
-                            </div>
-
-                            <Button variant="ghost" size="icon" rounded="full" onClick={prev}>
-                                <ArrowBigLeft />
-                            </Button>
-                            <Button variant="ghost" size="icon" rounded="full" onClick={next}>
-
-                                <ArrowBigRight />
-                            </Button>
-                        </>
-                    )}
-
-                    <Button variant="ghost" size="icon" rounded="full" onClick={() => toggleHighlight(!enableHighlight)} className="group">
-
-                        {enableHighlight ?
-                            <FileSearchIcon /> :
-                            <div className="relative inline-block">
-                                <FileSearchIcon />
-                                <span className="absolute inset-0 w-[2px] bg-primary-foreground rotate-45 translate-x-2 group-hover:bg-accent-foreground" />
-                            </div>
-
-                        }
-
-                    </Button>
-
-                    <Button variant="ghost" size="icon" rounded="full" onClick={rightSidebar.toggleSidebar}>
-                        <PanelRight />
-                    </Button>
-
-                </div>
-            </div>
-
-            <RightSidebar
-                side="right"
-                articleInfo={articleInfo}
-                documentInfo={documentInfo}
-                files={documents}
-                articleAvailableVersions={articleAvailableVersions}
-                documentAvailableVersions={documentAvailableVersions}
-                documentId={documentId}
-            />
-        </div>
-    );
-};