slate/components/core/ObjectPreview/FontObjectPreview.js

40 lines
1.1 KiB
JavaScript

import "isomorphic-fetch";
import * as React from "react";
import * as Styles from "~/common/styles";
import * as Utilities from "~/common/utilities";
import { css } from "@emotion/react";
import ObjectPreviewPrimitive from "./ObjectPreviewPrimitive";
import { useFont } from "~/components/core/FontFrame/hooks";
const STYLES_TEXT_PREVIEW = (theme) => css`
position: relative;
height: 100%;
margin: 8px;
background-color: ${theme.system.white};
border-radius: 8px;
box-shadow: ${theme.shadow.large};
`;
const STYLES_LETTER = (theme) => css`
overflow: hidden;
font-size: ${theme.typescale.lvl8};
`;
export default function FontObjectPreview({ file, ...props }) {
const { fontName } = useFont({ cid: file.cid }, [file.cid]);
const tag = Utilities.getFileExtension(file.filename) || "font";
return (
<ObjectPreviewPrimitive tag={tag} file={file} {...props}>
<div css={[Styles.CONTAINER_CENTERED, STYLES_TEXT_PREVIEW]}>
<div style={{ fontFamily: fontName }}>
<div css={STYLES_LETTER}>Aa</div>
</div>
</div>
</ObjectPreviewPrimitive>
);
}