@brizy/media-gallery
Version:
101 lines (100 loc) • 4.09 kB
JavaScript
import React from "react";
import { useTranslation } from "../../../../locale/useTranslation";
import { Card } from "@brizy/ui/lib/Card";
import { DuplicateReversed } from "@brizy/ui-icons/lib/icons/DuplicateReversed";
import { DetailItem } from "../../common/DetailItem";
import { TypographyParagraph } from "@brizy/ui/lib/Typography/Paragraph";
import { Divider } from "@brizy/ui/lib/Divider";
import { LayoutSection } from "@brizy/ui/lib/Layout/Section";
import { Layout } from "@brizy/ui/lib/Layout";
import { TypographyLink } from "@brizy/ui/lib/Typography/Link";
import { Space } from "@brizy/ui/lib/Space";
import { capitalize } from "../../../../utils/string";
var cardSize = {
custom: [
21,
29,
0,
39
]
};
var card2Size = {
custom: [
0,
10,
0,
0
]
};
var layoutGutter = [
0,
18
];
export var Content = function(param) {
var fileName = param.fileName, altTitle = param.altTitle, dimensions = param.dimensions, url = param.url, fileType = param.fileType, fileSource = param.fileSource, onCopy = param.onCopy;
var t = useTranslation().t;
var author = fileSource.author, provider = fileSource.provider, termsUrl = fileSource.termsUrl, authorUrl = fileSource.authorUrl;
var capitalizedProvider = capitalize(provider);
return /*#__PURE__*/ React.createElement(Card, {
size: cardSize,
width: "100%",
color: "transparent",
borderStyle: "none"
}, /*#__PURE__*/ React.createElement(Layout, {
gutter: layoutGutter,
alignY: "middle"
}, /*#__PURE__*/ React.createElement(LayoutSection, null), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 8
}, /*#__PURE__*/ React.createElement(TypographyParagraph, {
ellipsis: true,
size: "xsmall",
color: "white",
strong: true
}, t("DETAILS"))), /*#__PURE__*/ React.createElement(LayoutSection, {
push: 1,
span: 16
}, /*#__PURE__*/ React.createElement(Divider, {
color: "gray-darkest"
})), /*#__PURE__*/ React.createElement(LayoutSection, null), /*#__PURE__*/ React.createElement(DetailItem, {
title: t("File Name")
}, fileName), dimensions && /*#__PURE__*/ React.createElement(DetailItem, {
title: t("Dimensions")
}, dimensions), /*#__PURE__*/ React.createElement(DetailItem, {
title: t("File Type")
}, fileType), altTitle && /*#__PURE__*/ React.createElement(DetailItem, {
title: t("Alt Title")
}, altTitle), /*#__PURE__*/ React.createElement(DetailItem, {
title: t("File URL"),
icon: DuplicateReversed,
onIconClick: onCopy
}, url), /*#__PURE__*/ React.createElement(LayoutSection, null, /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true
}, t("File Source")), /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true,
color: "white"
}, t("Image by"), " ", /*#__PURE__*/ React.createElement(TypographyLink, {
target: "_blank",
href: authorUrl
}, "@", author, " ")), /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true,
color: "white"
}, t("from"), " ", capitalizedProvider), /*#__PURE__*/ React.createElement(Space, {
spacing: 5
}), /*#__PURE__*/ React.createElement(Card, {
size: card2Size,
width: "100%",
color: "transparent",
borderStyle: "none"
}, /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true
}, t("This image is provided by a third party called {{capitalizedProvider}}. By using this image, you are agreeing to {{capitalizedProvider}}'s", {
capitalizedProvider: capitalizedProvider
}), " ", /*#__PURE__*/ React.createElement(TypographyLink, {
target: "_blank",
href: termsUrl
}, t("Terms")), " ", t("and you understand that you are publishing the image and are responsible for it."))))));
};