134 lines
4.0 KiB
TypeScript
Executable File
134 lines
4.0 KiB
TypeScript
Executable File
import React from "react";
|
|
import { Button } from "components/Button/Button";
|
|
import Typography from "components/typography/Typography";
|
|
import {
|
|
SVGArrowDown,
|
|
SVGArrowUp,
|
|
SVGCite,
|
|
SVGFiletext,
|
|
SVGDownload,
|
|
SVGShare,
|
|
SVGFolder,
|
|
} from "components/icons";
|
|
import classNames from "classnames";
|
|
import { Transition } from "@headlessui/react";
|
|
import Link from "components/typography/Link";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ShareButton } from "./ArticleShareButton";
|
|
|
|
const interactionButtonsStore = [
|
|
{
|
|
icon: <SVGDownload />,
|
|
title: "Download",
|
|
buttonEmphasis: "low",
|
|
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
|
|
},
|
|
{
|
|
icon: <SVGCite />,
|
|
title: "Cite",
|
|
buttonEmphasis: "low",
|
|
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
|
|
},
|
|
{
|
|
icon: <SVGShare />,
|
|
title: "Share",
|
|
buttonEmphasis: "low",
|
|
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
|
|
},
|
|
];
|
|
|
|
type ArticleButtonProps = {
|
|
isAbstractOpen?: boolean;
|
|
openAbstract?: () => void;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
emphasis?: "high" | "low";
|
|
articleID?: string;
|
|
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
|
|
|
|
export function ArticleInteractionButtons({
|
|
isAbstractOpen = false,
|
|
children,
|
|
openAbstract = () => {},
|
|
className,
|
|
articleID,
|
|
emphasis = "high", //to change displaying of component
|
|
...props
|
|
}: ArticleButtonProps) {
|
|
const [t, i18next] = useTranslation("translation", {
|
|
keyPrefix: "articlePage.interactionButtons",
|
|
});
|
|
/* ----------------------------- Abstract Button ---------------------------- */
|
|
const abstractButton = (
|
|
<Button
|
|
emphasis="medium"
|
|
className="text-sm leading-4 items-center px-3 mr-2 focus:outline-none active:outline-none"
|
|
onClick={openAbstract}
|
|
>
|
|
<Typography fontWeightVariant="bold" className="pr-2">
|
|
{t("abstract")}
|
|
</Typography>
|
|
<Button.Icon>
|
|
{!isAbstractOpen ? (
|
|
<SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
|
|
) : (
|
|
<SVGArrowUp className="w-4 fill-blue-700 stroke-blue-700" />
|
|
)}
|
|
</Button.Icon>
|
|
</Button>
|
|
);
|
|
|
|
/* ---------------------------- Read file button ---------------------------- */
|
|
const readFileButton = (
|
|
<Link
|
|
to={`/article/content/${articleID}`}
|
|
className="rounded active:outline focus:outline focus:outline-blue-400/10 outline-8 active:outline-blue-400/10"
|
|
>
|
|
<div
|
|
className="bg-blue-600
|
|
hover:bg-blue-500
|
|
active:bg-blue-700
|
|
focus:shadow-lg shadow-blue-500
|
|
p-2 rounded
|
|
flex flex-row space-x-2
|
|
"
|
|
>
|
|
<SVGFiletext className="w-6 fill-white stroke-white" />
|
|
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-white">{t("readFile")}</Typography>}
|
|
</div>
|
|
</Link>
|
|
);
|
|
/* ----------------------------- Download button ---------------------------- */
|
|
const downLoadButton = (
|
|
<Button emphasis="low" className="px-2 space-x-2">
|
|
<Button.Icon>
|
|
<SVGDownload className="w-6 fill-gray-900 stroke-gray-900" />
|
|
</Button.Icon>
|
|
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("download")}</Typography>}
|
|
</Button>
|
|
);
|
|
|
|
/* ------------------------------- Cite button ------------------------------ */
|
|
|
|
const citeButton = (
|
|
<Button emphasis="low" className="px-2 space-x-2">
|
|
<Button.Icon>
|
|
<SVGCite className="w-6 fill-gray-900 stroke-gray-900" />
|
|
</Button.Icon>
|
|
{emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("cite")}</Typography>}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-row space-x-2">
|
|
{emphasis != "high" && abstractButton}
|
|
{readFileButton}
|
|
{downLoadButton}
|
|
{citeButton}
|
|
<ShareButton emphasis={emphasis} linktoCopy={`/article/content/${articleID}`} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
|