import { useRouter } from "next/router"; // hooks import useInboxView from "hooks/use-inbox-view"; // components import { InboxIssueCard, InboxFiltersList } from "components/inbox"; // ui import { Loader } from "components/ui"; export const IssuesListSidebar = () => { const router = useRouter(); const { inboxIssueId } = router.query; const { issues: inboxIssues, filtersLength } = useInboxView(); return ( <div className="h-full flex flex-col overflow-hidden"> <InboxFiltersList /> {inboxIssues ? ( inboxIssues.length > 0 ? ( <div className="divide-y divide-custom-border-200 overflow-auto h-full"> {inboxIssues.map((issue) => ( <InboxIssueCard key={issue.id} active={issue.bridge_id === inboxIssueId} issue={issue} /> ))} </div> ) : ( <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200"> {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} </div> ) ) : ( <Loader className="p-4 space-y-4"> <Loader.Item height="50px" /> <Loader.Item height="50px" /> <Loader.Item height="50px" /> <Loader.Item height="50px" /> </Loader> )} </div> ); };