pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-09 12:16:36 +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

37
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,10 +125,12 @@ function ProductUpdatesPopup({ updates, show }: ProductUpdatesPopupProps) {
}, [show]); }, [show]);
return ( return (
<Popover>
<Transition show={open}> <Transition show={open}>
<div <PopoverTrigger asChild>
<button
className={cn( className={cn(
"relative z-1", "relative z-1 cursor-pointer",
"rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm", "rounded-md border bg-muted p-2 py-3 w-full flex items-start gap-2 text-sm",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
"data-closed:opacity-0 data-closed:translate-y-full" "data-closed:opacity-0 data-closed:translate-y-full"
@@ -134,10 +140,12 @@ function ProductUpdatesPopup({ updates, show }: ProductUpdatesPopupProps) {
<BellIcon className="flex-none size-4" /> <BellIcon className="flex-none size-4" />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<p className="font-medium">{t("productUpdateWhatsNew")}</p> <p className="font-medium text-start">
{t("productUpdateWhatsNew")}
</p>
<small <small
className={cn( className={cn(
"text-muted-foreground", "text-start text-muted-foreground",
"overflow-hidden h-8", "overflow-hidden h-8",
"[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]" "[-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]"
)} )}
@@ -145,17 +153,16 @@ function ProductUpdatesPopup({ updates, show }: ProductUpdatesPopupProps) {
{updates[0].contents} {updates[0].contents}
</small> </small>
</div> </div>
<button <div className="p-1 cursor-pointer">
className="p-1 cursor-pointer"
onClick={() => {
setOpen(false);
// onClose();
}}
>
<ChevronRightIcon className="size-4 flex-none" /> <ChevronRightIcon className="size-4 flex-none" />
</button>
</div> </div>
</button>
</PopoverTrigger>
<PopoverContent side="right" align="end">
Hello
</PopoverContent>
</Transition> </Transition>
</Popover>
); );
} }