binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: product updates tag and date added

Browse source
This commit is contained in:
anmolsinghbhatia 2023-04-25 18:02:13 +05:30
parent 1364c842e0
commit a7d9591c44
1 changed files with 28 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
apps/app/components/ui/product-updates-modal.tsx
View file

@ -3,10 +3,14 @@ import useSWR from "swr";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// component
import { MarkdownRenderer, Spinner } from "components/ui";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { XMarkIcon } from "@heroicons/react/20/solid";
// services
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
import { MarkdownRenderer } from "components/ui"; // helper
import { renderLongDateFormat } from "helpers/date-time.helper";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
@ -15,7 +19,6 @@ type Props = {
export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => { export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates()); const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
console.log("updates:", updates);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={setIsOpen}> <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
@ -60,9 +63,29 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</button> </button>
</span> </span>
</Dialog.Title> </Dialog.Title>
{updates && {updates && updates.length > 0 ? (
updates.length > 0 && updates.map((item: any, index: number) => (
updates.map((item: any) => <MarkdownRenderer markdown={item.body} />)} <>
<div className="flex items-center gap-2 text-xs text-brand-secondary">
<span className="flex items-center rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs">
{item.tag_name}
</span>
<span>{renderLongDateFormat(item.published_at)}</span>
{index === 0 && (
<span className="flex items-center justify-center rounded-2xl bg-brand-accent p-1 px-2 text-xs text-white">
New
</span>
)}
</div>
<MarkdownRenderer markdown={item.body} />
</>
))
) : (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
Loading...
</div>
)}
</div> </div>
</div> </div>
</div> </div>