pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-04 09:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚧 use popup

Browse Source
This commit is contained in:
Fred KISSIE
2025-11-06 00:16:07 +01:00
parent 096ca379ce
commit 7a2dd31019
1 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ProductUpdates.tsx
View File

@@ -15,6 +15,7 @@ import {
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import * as React from "react"; import * as React from "react";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
export default function ProductUpdates({ export default function ProductUpdates({
isCollapsed isCollapsed
@@ -88,7 +89,7 @@ export default function ProductUpdates({
</> </>
)} )}
</small> </small>
<ProductUpdatesPopup <ProductUpdatesListPopup
updates={data.updates} updates={data.updates}
show={data.updates.length > 0} show={data.updates.length > 0}
/> />
@@ -107,9 +108,12 @@ export default function ProductUpdates({
); );
} }
type ProductUpdatesPopupProps = { updates: ProductUpdate[]; show: boolean }; type ProductUpdatesListPopupProps = { updates: ProductUpdate[]; show: boolean };
function ProductUpdatesPopup({ updates, show }: ProductUpdatesPopupProps) { function ProductUpdatesListPopup({
updates,
show
}: ProductUpdatesListPopupProps) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const t = useTranslations(); const t = useTranslations();
@@ -121,41 +125,44 @@ function ProductUpdatesPopup({ updates, show }: ProductUpdatesPopupProps) {
}, [show]); }, [show]);
return ( return (
<Transition show={open}> <Popover>
<div <Transition show={open}>
className={cn( <PopoverTrigger asChild>
"relative z-1", <button
"rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm",
"transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full"
)}
>
<div className="rounded-md bg-muted-foreground/20 p-2">
<BellIcon className="flex-none size-4" />
</div>
<div className="flex flex-col gap-2">
<p className="font-medium">{t("productUpdateWhatsNew")}</p>
<small
className={cn( className={cn(
"text-muted-foreground", "relative z-1 cursor-pointer",
"overflow-hidden h-8", "rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm",
"[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]" "transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full"
)} )}
> >
{updates[0].contents} <div className="rounded-md bg-muted-foreground/20 p-2">
</small> <BellIcon className="flex-none size-4" />
</div> </div>
<button <div className="flex flex-col gap-2">
className="p-1 cursor-pointer" <p className="font-medium text-start">
onClick={() => { {t("productUpdateWhatsNew")}
setOpen(false); </p>
// onClose(); <small
}} className={cn(
> "text-start text-muted-foreground",
<ChevronRightIcon className="size-4 flex-none" /> "overflow-hidden h-8",
</button> "[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]"
</div> )}
</Transition> >
{updates[0].contents}
</small>
</div>
<div className="p-1 cursor-pointer">
<ChevronRightIcon className="size-4 flex-none" />
</div>
</button>
</PopoverTrigger>
<PopoverContent side="right" align="end">
Hello
</PopoverContent>
</Transition>
</Popover>
); );
} }