113 lines
3.1 KiB
TypeScript
Executable File
113 lines
3.1 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";
|
|
|
|
const interactionButtonsStore = [
|
|
{
|
|
icon: <SVGFiletext />,
|
|
title: "Read file",
|
|
buttonEmphasis: "high",
|
|
iconClassName: "h-6 fill-white stroke-white",
|
|
},
|
|
{
|
|
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 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">
|
|
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>
|
|
);
|
|
const fileInteractionButtons = interactionButtonsStore.map((button) => {
|
|
return (
|
|
button.title === 'Read file' ?
|
|
<Link
|
|
to={`/article/content/${articleID}`}>
|
|
<Button
|
|
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
|
|
className="h-max px-2 mr-2"
|
|
>
|
|
<Button.Icon>
|
|
{React.cloneElement(button.icon, { className: button.iconClassName })}
|
|
</Button.Icon>
|
|
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
|
|
</Button>
|
|
</Link>
|
|
:
|
|
<Button
|
|
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
|
|
className="h-max px-2 mr-2"
|
|
>
|
|
<Button.Icon>
|
|
{React.cloneElement(button.icon, { className: button.iconClassName })}
|
|
</Button.Icon>
|
|
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
|
|
</Button>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-row">
|
|
{emphasis === "low" && !children ? abstractButton : null}
|
|
{children ? children : fileInteractionButtons}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ArticleInteractionButtons.displayName = "ArticleInteractionButtons";
|