631d600920
* stash * refactor, working in non-collab + collab editor * attachment styling * Avoid crypto require in browser * AttachmentIcon, handling unknown types * Do not allow attachment creation for file sizes over limit * Allow image as file attachment * Upload placeholder styling * lint * Refactor: Do not use placeholder for file attachmentuploads * Add loading spinner * fix: Extra paragraphs around attachments on insert * Bump editor * fix build error * Remove attachment placeholder when upload fails * Remove unused styles * fix: Attachments on shared pages * Merge fixes
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { AttachmentIcon } from "outline-icons";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import { stringToColor } from "../../utils/color";
|
|
|
|
type Props = {
|
|
title: string;
|
|
size?: number;
|
|
};
|
|
|
|
export default function FileExtension(props: Props) {
|
|
const parts = props.title.split(".");
|
|
const extension = parts.length > 1 ? parts.pop() : undefined;
|
|
|
|
return (
|
|
<Icon
|
|
style={{ background: stringToColor(extension || "") }}
|
|
$size={props.size || 28}
|
|
>
|
|
{extension ? (
|
|
<span>{extension?.slice(0, 4)}</span>
|
|
) : (
|
|
<AttachmentIcon color="currentColor" />
|
|
)}
|
|
</Icon>
|
|
);
|
|
}
|
|
|
|
const Icon = styled.span<{ $size: number }>`
|
|
font-family: ${(props) => props.theme.fontFamilyMono};
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
color: white;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
|
|
min-width: ${(props) => props.$size}px;
|
|
height: ${(props) => props.$size}px;
|
|
`;
|