36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { FaRegClock } from "react-icons/fa";
|
|
import { useRecoilValue } from "recoil";
|
|
import { laterConvosSelector } from "../../recoil/main";
|
|
import ConversationFullRow from "../Conversations/ConversationFullRow";
|
|
|
|
export default function Later() {
|
|
const laterConvos = useRecoilValue(laterConvosSelector);
|
|
|
|
return (
|
|
<>
|
|
{laterConvos?.length > 0 ? (
|
|
<span className="flex flex-col w-full items-stretch">
|
|
{laterConvos.map((tRoom) => (
|
|
<ConversationFullRow key={tRoom.id} conversation={tRoom} />
|
|
))}
|
|
</span>
|
|
) : (
|
|
<div className="mx-auto my-auto flex flex-col">
|
|
<img
|
|
src="/illustrations/undraw_season_change_f99v.svg"
|
|
className="h-[15rem] mx-auto my-auto"
|
|
/>
|
|
|
|
<span></span>
|
|
<span className="text-slate-400 text-center mt-5">
|
|
Focusing right now? <br></br> No worries, go through low-priority{" "}
|
|
<br></br>
|
|
conversations <FaRegClock className="inline" /> later.
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|