misc_pterodactyl-panel/resources/scripts/components/elements/TitledGreyBox.tsx

31 lines
932 B
TypeScript
Raw Normal View History

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import tw from 'twin.macro';
interface Props {
icon?: IconProp;
title: string | React.ReactNode;
className?: string;
children: React.ReactNode;
}
2020-02-08 23:23:08 +00:00
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
<div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
<div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
{typeof title === 'string' ?
<p css={tw`text-sm uppercase`}>
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
</p>
:
title
}
</div>
<div css={tw`p-3`}>
{children}
</div>
</div>
);
2020-02-08 23:23:08 +00:00
export default TitledGreyBox;