88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
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";
|
|
|
|
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 = {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
emphasis?: "high" | "low";
|
|
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
|
|
|
|
export function ArticleInteractionButtons({
|
|
children,
|
|
className,
|
|
emphasis, //to change displaying of component
|
|
...props
|
|
}: ArticleButtonProps) {
|
|
const abstractButton = (
|
|
<Button emphasis="medium" className="text-sm leading-4 items-center px-3">
|
|
<Typography fontWeightVariant="bold" className="pr-2">
|
|
Abstract
|
|
</Typography>
|
|
<Button.Icon>
|
|
<SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
|
|
</Button.Icon>
|
|
</Button>
|
|
);
|
|
|
|
const fileInteractionButtons = interactionButtonsStore.map((button) => {
|
|
return (
|
|
<Button
|
|
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
|
|
className="h-max px-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";
|