filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 05:54:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(GlobalCarouselJumpers/FileDescription): add FileDescription jumper, triggered by the More button in the carousel header

Browse Source
This commit is contained in:
Aminejv 2021-10-26 17:25:54 +01:00
parent e213b7b609
commit c37ec1c70c
1 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/system/components/GlobalCarousel/jumpers/FileDescription.js Normal file
View File

@ -0,0 +1,36 @@
import * as React from "react";
import * as Styles from "~/common/styles";
import * as System from "~/components/system";
import * as Jumper from "~/components/core/Jumper";
import { Show } from "~/components/utility/Show";
import LinkIcon from "~/components/core/LinkIcon";
export function FileDescription({ file, isOpen, onClose }) {
return isOpen ? (
<Jumper.Root onClose={onClose}>
<Jumper.Header>
<System.H3 as="h1">{file.name || file.filename}</System.H3>
<Show when={file.isLink}>
<div style={{ marginTop: 5 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<LinkIcon file={file} width={12} height={12} />
<System.P2
as="p"
nbrOflines={1}
href={file.url}
css={Styles.LINK}
style={{ marginLeft: 5 }}
>
{file.url}
</System.P2>
</div>
</Show>
</Jumper.Header>
<Jumper.Divider />
<Jumper.Item>
<System.P2>{file.body}</System.P2>
</Jumper.Item>
</Jumper.Root>
) : null;
}