Website: Enhance partners page

ui/src/components/dialog.tsx

@@ -39,11 +39,11 @@ const DialogContent = React.forwardRef<
 			)}
 			{...props}
 		>
-			{children}
-			<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
-				<X className="h-4 w-4" />
+			<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sticky top-2 z-50 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
+				<X className="backdrop-invert-50 absolute right-4 h-6 w-6 rounded-full bg-white p-0.5 backdrop-opacity-50" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
+			{children}
 		</DialogPrimitive.Content>
 	</DialogPrimitive.Portal>
 ));

website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerBadges.tsx

@@ -0,0 +1,122 @@
+import SdgIcon from '@/app/[lang]/[region]/(website)/partners/(assets)/sdg-circle.svg';
+import {
+	FundRaiserBadgeType,
+	RecipientsBadgeType,
+	SdgBadgeType,
+} from '@/app/[lang]/[region]/(website)/partners/(types)/PartnerBadges';
+import { UsersIcon } from '@heroicons/react/24/solid';
+import { Badge, HoverCard, HoverCardContent, HoverCardTrigger, Separator, Typography } from '@socialincome/ui';
+import { cn } from '@socialincome/ui/src/lib/utils';
+import Image from 'next/image';
+
+function RecipientsBadge({
+	hoverCardOrgName,
+	hoverCardTotalRecipients,
+	hoverCardTotalActiveRecipients,
+	hoverCardTotalSuspendedRecipients,
+	hoverCardTotalFormerRecipients,
+	isInsideHoverCard,
+	translatorBadgeRecipients,
+	translatorBadgeRecipientsBy,
+	translatorBadgeActive,
+	translatorBadgeFormer,
+	translatorBadgeSuspended,
+}: RecipientsBadgeType) {
+	let badgeClassName = 'bg-primary hover:bg-primary text-primary bg-opacity-10 hover:bg-opacity-100 hover:text-white';
+	if (isInsideHoverCard) {
+		badgeClassName = cn(badgeClassName, ' py-2');
+	}
+	const userIconClassName = isInsideHoverCard ? 'mr-2 h-5 w-5 rounded-full' : 'mr-1 h-4 w-4 rounded-full';
+
+	return (
+		<HoverCard>
+			<HoverCardTrigger>
+				<Badge className={badgeClassName}>
+					<UsersIcon className={userIconClassName} />
+					<Typography size={isInsideHoverCard ? 'md' : 'sm'} weight="normal" className="text-inherit">
+						{hoverCardTotalRecipients || 0} {isInsideHoverCard ? translatorBadgeRecipients : ''}
+					</Typography>
+				</Badge>
+			</HoverCardTrigger>
+			<HoverCardContent className="w-auto max-w-52 p-4">
+				<div>
+					<Typography size="sm" weight="normal">
+						{hoverCardTotalRecipients || 0} {translatorBadgeRecipientsBy} {hoverCardOrgName}
+					</Typography>
+				</div>
+				<Separator className="bg-primary mb-3 mt-2 bg-opacity-20" />
+				<div className="flex flex-col space-y-2">
+					<Badge className="bg-primary text-popover-foreground hover:bg-primary hover:text-popover-foreground bg-opacity-10 hover:bg-opacity-20">
+						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
+							{hoverCardTotalActiveRecipients || 0} {translatorBadgeActive}
+						</Typography>
+					</Badge>
+					<Badge className="bg-accent text-popover-foreground hover:bg-accent hover:text-popover-foreground bg-opacity-10 hover:bg-opacity-20">
+						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
+							{hoverCardTotalFormerRecipients || 0} {translatorBadgeFormer}
+						</Typography>
+					</Badge>
+					<Badge className="bg-secondary text-popover-foreground hover:bg-secondary hover:text-popover-foreground bg-opacity-10 hover:bg-opacity-20">
+						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
+							{hoverCardTotalSuspendedRecipients || 0} {translatorBadgeSuspended}
+						</Typography>
+					</Badge>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	);
+}
+
+function SDGBadge({
+	hoverCardOrgName,
+	sdgNumber,
+	translatorSdg,
+	translatorSdgTitle,
+	translatorSdgMission1,
+	translatorSdgMission2,
+}: SdgBadgeType) {
+	return (
+		<HoverCard>
+			<HoverCardTrigger>
+				<Badge className="bg-primary hover:bg-primary text-primary bg-opacity-10 hover:bg-opacity-100 hover:text-white">
+					<Typography size="sm" weight="normal" className="text-inherit">
+						{translatorSdgTitle}
+					</Typography>
+				</Badge>
+			</HoverCardTrigger>
+			<HoverCardContent>
+				<div className="flex items-center">
+					<Image className="mr-1 h-4 w-4 rounded-full" src={SdgIcon} alt="SDG Icon" />
+					<Typography size="sm" weight="normal">
+						{translatorSdg} {sdgNumber?.toString() || ''}: {translatorSdgTitle}
+					</Typography>
+				</div>
+				<Separator className="bg-primary mb-3 mt-3 bg-opacity-20" />
+				<div>
+					<Typography size="sm" weight="normal">
+						{translatorSdgMission1} {hoverCardOrgName} {translatorSdgMission2}
+					</Typography>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	);
+}
+
+function FundraiserBadge({ fundRaiserTranslation }: FundRaiserBadgeType) {
+	return (
+		<HoverCard>
+			<HoverCardTrigger>
+				<Badge className="bg-accent text-primary hover:bg-accent bg-opacity-50 hover:bg-opacity-100 hover:text-white">
+					<Typography size="sm" weight="normal" className="text-inherit">
+						{fundRaiserTranslation}
+					</Typography>
+				</Badge>
+			</HoverCardTrigger>
+			{/*<HoverCardContent>*/}
+			{/*TODO: Should anything go here?*/}
+			{/*</HoverCardContent>*/}
+		</HoverCard>
+	);
+}
+
+export { FundraiserBadge, RecipientsBadge, SDGBadge };

website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerHome.tsx

@@ -0,0 +1,253 @@
+'use client';
+import { FundraiserBadge, RecipientsBadge } from '@/app/[lang]/[region]/(website)/partners/(components)/PartnerBadges';
+import { CountryBadgeType, RecipientsBadgeType } from '@/app/[lang]/[region]/(website)/partners/(types)/PartnerBadges';
+import { NgoHomeProps, NgoHoverCardType } from '@/app/[lang]/[region]/(website)/partners/(types)/PartnerCards';
+import { Badge, Separator, Typography } from '@socialincome/ui';
+import { CH, SL } from 'country-flag-icons/react/1x1';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ReactElement } from 'react';
+
+const country_abbreviations_to_flag_map: Record<string, ReactElement> = {
+	SL: <SL className="h-5 w-5 rounded-full" />,
+	CH: <CH className="h-5 w-5 rounded-full" />,
+};
+function getFlag(abbreviation: string): ReactElement {
+	return country_abbreviations_to_flag_map[abbreviation] || <SL className="h-5 w-5 rounded-full" />;
+}
+export function PartnerHome({ currentNgo, currentNgoCountry, translations }: NgoHomeProps) {
+	const image_base_path = '/assets/partners/';
+	const recipientsBadge: RecipientsBadgeType = {
+		hoverCardOrgName: currentNgo!['org-long-name'],
+		hoverCardTotalRecipients: currentNgo!['recipients-total'],
+		hoverCardTotalActiveRecipients: currentNgo!['recipients-active'],
+		hoverCardTotalFormerRecipients: currentNgo!['recipients-former'],
+		hoverCardTotalSuspendedRecipients: currentNgo!['recipients-suspend'],
+		translatorBadgeRecipients: '',
+		translatorBadgeRecipientsBy: '',
+		translatorBadgeActive: '',
+		translatorBadgeFormer: '',
+		translatorBadgeSuspended: '',
+	};
+
+	const countryBadge: CountryBadgeType = {
+		countryAbbreviation: currentNgo!['org-country'],
+		countryFlagComponent: getFlag(currentNgo!['org-country']),
+	};
+	const ngoHoverCard: NgoHoverCardType = {
+		orgImage: image_base_path.concat(currentNgo!['org-image']),
+		orgLongName: currentNgo!['org-long-name'],
+		partnershipStart: currentNgo!['partnership-start'],
+		orgDescriptionParagraphs: currentNgo!['org-description-paragraphs'],
+		quote: currentNgo!['org-quote'] ?? null,
+		quoteAuthor: currentNgo!['org-quote-author'] ?? null,
+		quotePhoto: currentNgo!['org-quote-photo'] ? image_base_path.concat(currentNgo!['org-quote-photo']) : null,
+		orgFoundation: currentNgo!['org-foundation'],
+		orgHeadquarter: currentNgo!['org-headquarter'],
+		orgWebsite: currentNgo!['org-website'] ?? null,
+		orgFacebook: currentNgo!['org-facebook'] ?? null,
+		orgInstagram: currentNgo!['org-instagram'] ?? null,
+		orgLinkedIn: currentNgo!['org-linkedin'] ?? null,
+		orgYoutube: currentNgo!['org-youtube'] ?? null,
+		orgFundRaiserText: currentNgo!['org-fundraiser-text'] ?? null,
+		orgSlug: currentNgo!['org-slug'],
+	};
+	const showVisitOnline: boolean = !!(
+		ngoHoverCard.orgInstagram ||
+		ngoHoverCard.orgFacebook ||
+		ngoHoverCard.orgWebsite ||
+		ngoHoverCard.orgLinkedIn ||
+		ngoHoverCard.orgYoutube
+	);
+
+	const showFundRaiser: boolean = !!ngoHoverCard.orgFundRaiserText;
+	return (
+		<div className="flex items-center justify-center">
+			<div className="sm:w-3/4">
+				<div className="relative">
+					<Image
+						className="h-auto w-full rounded-t-lg"
+						src={ngoHoverCard.orgImage}
+						width="48"
+						height="48"
+						alt="Organization Photo"
+						unoptimized
+					/>
+					<div className="absolute bottom-0 left-0 h-32 w-full bg-gradient-to-t from-black to-transparent">
+						<div className="text-accent absolute bottom-0 left-0 px-8 py-4">
+							<Typography size="5xl" weight="medium">
+								{ngoHoverCard.orgLongName}
+							</Typography>
+						</div>
+					</div>
+				</div>
+				<div className="px-8 pb-10 pt-2">
+					<div className="flex flex-col gap-2 p-0 pb-8 pt-2 sm:flex-row sm:items-center sm:justify-between">
+						<div className="pb-4 text-center sm:order-2 sm:flex-shrink-0 sm:pb-0 sm:text-right">
+							<Typography size="md" weight="normal">
+								{translations.partnerSince} {ngoHoverCard.partnershipStart}
+							</Typography>
+						</div>
+						<div className="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
+							<RecipientsBadge
+								{...recipientsBadge}
+								isInsideHoverCard={true}
+								translatorBadgeRecipients={translations.badgeRecipient}
+								translatorBadgeRecipientsBy={translations.badgeRecipientBy}
+								translatorBadgeActive={translations.badgeActive}
+								translatorBadgeFormer={translations.badgeFormer}
+								translatorBadgeSuspended={translations.badgeSuspended}
+							/>
+							<Badge className="bg-primary hover:bg-primary text-primary space-x-2 bg-opacity-10 px-4 py-2 hover:bg-opacity-100 hover:text-white">
+								{countryBadge?.countryFlagComponent || <SL className="h-5 w-5 rounded-full" />}
+								<Typography size="md" weight="normal" className="text-inherit">
+									{currentNgoCountry}
+								</Typography>
+							</Badge>
+						</div>
+					</div>
+					{showFundRaiser && (
+						<div className="border-primary mb-8 flex items-center justify-start space-x-5 rounded-md border-2 border-opacity-80 py-4 pl-4">
+							<FundraiserBadge fundRaiserTranslation={translations.fundRaiser} />
+							<span>
+								{ngoHoverCard.orgFundRaiserText?.map((fragment, index) => {
+									return fragment.href ? (
+										<Link href={fragment.href} key={index}>
+											<Typography as="span" size="md" color="primary">
+												{fragment.text}
+											</Typography>
+										</Link>
+									) : (
+										<Typography as="span" size="md" key={index}>
+											{fragment.text}
+										</Typography>
+									);
+								})}
+							</span>
+						</div>
+					)}
+					{ngoHoverCard.orgDescriptionParagraphs.map((paragraph, index) => {
+						return (
+							<div key={index} className="mb-4">
+								{paragraph.map((fragment, index2) => {
+									return fragment.href ? (
+										<Link href={fragment.href} key={index2}>
+											<Typography as="span" size="lg" color="primary">
+												{fragment.text}
+											</Typography>
+										</Link>
+									) : (
+										<Typography as="span" size="lg" key={index}>
+											{fragment.text}
+										</Typography>
+									);
+								})}
+							</div>
+						);
+					})}
+					<Separator className="bg-primary my-6 bg-opacity-10" />
+					{ngoHoverCard.quote && ngoHoverCard.quoteAuthor ? (
+						<>
+							<div className="py-12 text-center">
+								<div className="my-4 px-6">
+									{ngoHoverCard.quote.map((title, index) => (
+										<Typography as="span" size="3xl" weight="medium" color={title.color} key={index}>
+											{title.text}{' '}
+										</Typography>
+									))}
+								</div>
+								<div className="my-4 flex items-center justify-center space-x-3">
+									{ngoHoverCard.quotePhoto && (
+										<Image
+											src={ngoHoverCard.quotePhoto}
+											alt={ngoHoverCard.quoteAuthor}
+											width="48"
+											height="48"
+											className="my-3 h-auto w-12"
+										/>
+									)}
+									<Typography size="lg">
+										{ngoHoverCard.quoteAuthor}, {currentNgo['org-short-name']}
+									</Typography>
+								</div>
+							</div>
+							<Separator className="bg-primary my-6 bg-opacity-10" />
+						</>
+					) : (
+						''
+					)}
+					<div className="grid grid-cols-3 gap-4">
+						<div className="col-span-1">
+							<Typography size="lg">{translations.mission}</Typography>
+						</div>
+						<div className="col-span-2">
+							<Typography size="lg">{currentNgo!['org-mission']}</Typography>
+						</div>
+					</div>
+					<div className="grid grid-cols-3 gap-4">
+						<div className="col-span-1">
+							<Typography size="lg">{translations.founded}</Typography>
+						</div>
+						<div className="col-span-2">
+							<Typography size="lg">{ngoHoverCard.orgFoundation}</Typography>
+						</div>
+					</div>
+					<div className="grid grid-cols-3 gap-4">
+						<div className="col-span-1">
+							<Typography size="lg">{translations.headquarter}</Typography>
+						</div>
+						<div className="col-span-2">
+							<Typography size="lg">{ngoHoverCard.orgHeadquarter}</Typography>
+						</div>
+					</div>
+					{showVisitOnline && (
+						<div className="grid grid-cols-3 gap-4">
+							<div className="col-span-1">
+								<Typography size="lg">{translations.moreLinks}</Typography>
+							</div>
+							<div className="col-span-2">
+								{ngoHoverCard.orgWebsite && (
+									<Link href={ngoHoverCard.orgWebsite} className="ml-auto inline-block pr-2 text-lg underline">
+										{translations.website}
+									</Link>
+								)}
+								{ngoHoverCard.orgFacebook && (
+									<Link href={ngoHoverCard.orgFacebook} className="ml-auto inline-block pr-2 text-lg underline">
+										{translations.facebook}
+									</Link>
+								)}
+								{ngoHoverCard.orgInstagram && (
+									<Link href={ngoHoverCard.orgInstagram} className="ml-auto inline-block pr-2 text-lg underline">
+										{translations.instagram}
+									</Link>
+								)}
+								{ngoHoverCard.orgLinkedIn && (
+									<Link href={ngoHoverCard.orgLinkedIn} className="ml-auto inline-block pr-2 text-lg underline">
+										{translations.linkedin}
+									</Link>
+								)}
+								{ngoHoverCard.orgYoutube && (
+									<Link href={ngoHoverCard.orgYoutube} className="ml-auto inline-block pr-2 text-lg underline">
+										{translations.youtube}
+									</Link>
+								)}
+							</div>
+						</div>
+					)}
+					<div className="grid grid-cols-3 gap-4">
+						<div className="col-span-1">
+							<Typography size="lg">{translations.permalink}</Typography>
+						</div>
+						<div className="col-span-2">
+							<Link href={`https://socialincome.org/en/int/partners/${ngoHoverCard.orgSlug}`}>
+								<Typography size="lg" className="break-words underline">
+									{`socialincome.org/partners/${ngoHoverCard.orgSlug}`}
+								</Typography>
+							</Link>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}