shellphone.app/app/features/messages/components/empty-messages.tsx

32 lines
1.1 KiB
TypeScript
Raw Normal View History

import { IoCreateOutline, IoMailOutline } from "react-icons/io5";
2022-05-20 00:45:07 +00:00
import { useAtom } from "jotai";
2022-05-20 00:45:07 +00:00
import { bottomSheetOpenAtom } from "~/routes/__app/messages";
2021-09-24 23:34:48 +00:00
export default function EmptyMessages() {
2022-05-20 00:45:07 +00:00
const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
const openNewMessageArea = () => setIsBottomSheetOpen(true);
2021-09-24 23:34:48 +00:00
return (
<div className="text-center my-auto">
<IoMailOutline className="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
<h3 className="mt-2 text-sm font-medium text-gray-900">You don&#39;t have any messages yet</h3>
2021-09-24 23:34:48 +00:00
<p className="mt-1 text-sm text-gray-500">
Get started by sending a message
<br />
to someone you know.
</p>
<div className="mt-6">
<button
type="button"
2021-10-15 22:24:28 +00:00
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2"
2021-09-24 23:34:48 +00:00
onClick={openNewMessageArea}
>
<IoCreateOutline className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Type a new message
2021-09-24 23:34:48 +00:00
</button>
</div>
</div>
);
}