misc_pterodactyl-panel/resources/scripts/components/FlashMessageRender.tsx

36 lines
1 KiB
TypeScript
Raw Normal View History

import React from 'react';
import MessageBox from '@/components/MessageBox';
2020-07-04 21:21:28 +00:00
import { useStoreState } from 'easy-peasy';
2020-07-04 19:39:55 +00:00
import tw from 'twin.macro';
type Props = Readonly<{
byKey?: string;
2020-07-04 21:21:28 +00:00
className?: string;
}>;
2020-07-04 21:21:28 +00:00
const FlashMessageRender = ({ byKey, className }: Props) => {
const flashes = useStoreState(state => state.flashes.items.filter(
flash => byKey ? flash.key === byKey : true,
));
return (
2020-07-04 23:26:07 +00:00
flashes.length ?
<div className={className}>
{
flashes.map((flash, index) => (
<React.Fragment key={flash.id || flash.type + flash.message}>
{index > 0 && <div css={tw`mt-2`}></div>}
<MessageBox type={flash.type} title={flash.title}>
{flash.message}
</MessageBox>
</React.Fragment>
))
}
</div>
:
null
);
};
2020-07-04 21:21:28 +00:00
export default FlashMessageRender;