misc_pterodactyl-panel/resources/scripts/components/elements/TitledGreyBox.tsx
2022-11-25 13:25:03 -07:00

31 lines
1 KiB
TypeScript

import { memo } from 'react';
import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import tw from 'twin.macro';
import isEqual from 'react-fast-compare';
interface Props {
icon?: IconProp;
title: string | React.ReactNode;
className?: string;
children: React.ReactNode;
}
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>
);
export default memo(TitledGreyBox, isEqual);