29 lines
914 B
TypeScript
29 lines
914 B
TypeScript
import React from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
|
|
|
interface Props {
|
|
icon?: IconProp;
|
|
title: string | React.ReactNode;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
|
|
<div className={`rounded shadow-md bg-neutral-700 ${className}`}>
|
|
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
|
|
{typeof title === 'string' ?
|
|
<p className={'text-sm uppercase'}>
|
|
{icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
|
|
</p>
|
|
:
|
|
title
|
|
}
|
|
</div>
|
|
<div className={'p-3'}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default TitledGreyBox;
|