@c-rex/components 0.1.37 → 0.1.39

package/src/footer/footer-shell.tsx

@@ -0,0 +1,52 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { cn } from "@c-rex/utils";
+
+type FooterShellProps = {
+    left: ReactNode;
+    middle?: ReactNode;
+    right?: ReactNode;
+    bottom?: ReactNode;
+    className?: HTMLAttributes<HTMLElement>["className"];
+    leftClassName?: HTMLAttributes<HTMLElement>["className"];
+    middleClassName?: HTMLAttributes<HTMLElement>["className"];
+    rightClassName?: HTMLAttributes<HTMLElement>["className"];
+    bottomClassName?: HTMLAttributes<HTMLElement>["className"];
+};
+
+/**
+ * Structural footer shell with left/middle/right content areas and an optional bottom row.
+ */
+export const FooterShell = ({
+    left,
+    middle,
+    right,
+    bottom,
+    className,
+    leftClassName,
+    middleClassName,
+    rightClassName,
+    bottomClassName,
+}: FooterShellProps) => {
+    return (
+        <footer className={cn(
+            "w-full bg-primary flex items-center flex-col text-primary-foreground",
+            className
+        )}>
+            <div className="container py-24 flex flex-row justify-between gap-8">
+                <div className={cn("space-y-4", leftClassName)}>{left}</div>
+
+                {middle && <div className={cn("space-y-4", middleClassName)}>{middle}</div>}
+
+                {right && <div className={cn("space-y-4 md:justify-self-end", rightClassName)}>{right}</div>}
+            </div>
+
+            {bottom && (
+                <div className={cn(bottomClassName, "w-full border-t flex justify-center p-4 text-xs  border-primary-foreground")}>
+
+                    {bottom}
+
+                </div>
+            )}
+        </footer>
+    );
+};

package/src/footer/footer.tsx

@@ -0,0 +1,7 @@
+export { VCardFooter, VCardFooter as Footer } from "./vcard-footer";
+export type { VCardFooterProps } from "./vcard-footer";
+export { FooterShell } from "./footer-shell";
+export { OrganizationContactBlock } from "./organization-contact-block";
+export { SocialLinksBlock } from "./social-links-block";
+export { LegalLinksBlock } from "./legal-links-block";
+export type { FooterLegalLink, FooterSocialLink } from "./types";

package/src/footer/legal-links-block.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import type { FooterLegalLink } from "./types";
+import { cn } from "@c-rex/utils";
+
+type LegalLinksBlockProps = {
+    links: FooterLegalLink[];
+    className?: string;
+};
+
+/**
+ * Footer block for legal/imprint/privacy links.
+ */
+export const LegalLinksBlock = ({ links, className }: LegalLinksBlockProps) => {
+    if (links.length === 0) return null;
+
+    return (
+        <div className={cn("flex gap-4 text-sm text-muted-foreground", className)}>
+            {links.map((link) => (
+                <Link key={`${link.href}-${link.label}`} href={link.href} className="hover:underline">
+                    {link.label}
+                </Link>
+            ))}
+        </div>
+    );
+};

package/src/footer/organization-contact-block.tsx

@@ -0,0 +1,94 @@
+import type { OrganizationProfile } from "@c-rex/services/vcard";
+import { cn } from "@c-rex/utils";
+import { getTranslations } from "next-intl/server";
+
+type OrganizationContactBlockProps = {
+    profile: OrganizationProfile;
+    className?: string;
+    headerClassName?: string;
+    detailsClassName?: string;
+    showOptionalLabels?: boolean;
+    showLogo?: boolean;
+};
+
+/**
+ * Footer block that renders organization identity and contact details.
+ */
+export const OrganizationContactBlock = async ({
+    profile,
+    className,
+    headerClassName,
+    detailsClassName,
+    showOptionalLabels = false,
+    showLogo = true,
+}: OrganizationContactBlockProps) => {
+    const t = await getTranslations();
+    const shouldRenderAddressLabel = showOptionalLabels && profile.addressLines.length > 0;
+    const sectionAriaLabel = t("footer.contact.sectionAriaLabel", {
+        organizationName: profile.organizationName,
+    });
+    const logoAlt = t("footer.contact.logoAlt", {
+        organizationName: profile.organizationName,
+    });
+
+    return (
+        <section className={className} aria-label={sectionAriaLabel}>
+            <div className={cn("flex items-center gap-3", headerClassName)}>
+                {showLogo && (
+                    <img
+                        src={profile.logoSrc}
+                        alt={logoAlt}
+                        className="h-8 w-auto object-contain sm:h-10"
+                    />
+                )}
+                <h3 className="text-lg font-semibold sm:text-xl">{profile.organizationName}</h3>
+            </div>
+
+            <div className={cn("space-y-2 text-sm", detailsClassName)}>
+                {shouldRenderAddressLabel && <p className="font-medium">{t("footer.contact.address")}</p>}
+                {profile.addressLines.length > 0 && (
+                    <address className="not-italic">
+                        {profile.addressLines.map((line, index) => (
+                            <p key={`${line}-${index}`}>{line}</p>
+                        ))}
+                    </address>
+                )}
+
+                {profile.telephoneEntries.length > 0 && (
+                    <ul className="space-y-1">
+                        {profile.telephoneEntries.map((entry, index) => (
+                            <li key={`${entry.value}-${index}`}>
+                                <span className="font-medium">{entry.label || t("footer.contact.phone")}:</span>{" "}
+                                {entry.href ? (
+                                    <a
+                                        className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                        href={entry.href}
+                                        aria-label={`${entry.label || t("footer.contact.phone")}: ${entry.value}`}
+                                    >
+                                        {entry.value}
+                                    </a>
+                                ) : (
+                                    <span aria-label={`${entry.label || t("footer.contact.phone")}: ${entry.value}`}>{entry.value}</span>
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+
+                {profile.email && (
+                    <p>
+                        {showOptionalLabels && <span className="font-medium">{t("footer.contact.email")}:</span>}
+                        {showOptionalLabels && " "}
+                        <a
+                            className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                            href={`mailto:${profile.email}`}
+                            aria-label={`${t("footer.contact.email")}: ${profile.email}`}
+                        >
+                            {profile.email}
+                        </a>
+                    </p>
+                )}
+            </div>
+        </section>
+    );
+};

package/src/footer/social-links-block.tsx

@@ -0,0 +1,38 @@
+import type { FooterSocialLink } from "./types";
+import { cn } from "@c-rex/utils";
+import { SocialIcon } from "../icons/social-icon";
+
+type SocialLinksBlockProps = {
+    links: FooterSocialLink[];
+    className?: string;
+    ariaLabel?: string;
+};
+
+/**
+ * Footer block for social media links.
+ */
+export const SocialLinksBlock = ({ links, className, ariaLabel }: SocialLinksBlockProps) => {
+    if (links.length === 0) return null;
+
+    return (
+        <nav aria-label={ariaLabel}>
+            <ul className={cn("flex flex-wrap gap-4 text-sm", className)}>
+                {links.map((link, index) => {
+                    return (
+                        <li key={`${link.href}-${index}`}>
+                            <a
+                                href={link.href}
+                                target="_blank"
+                                rel="noreferrer"
+                                title={link.label}
+                                className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                            >
+                                <SocialIcon label={link.label} className="size-7" />
+                            </a>
+                        </li>
+                    );
+                })}
+            </ul>
+        </nav>
+    );
+};

package/src/footer/types.ts

@@ -0,0 +1,10 @@
+export type FooterSocialLink = {
+    label: string;
+    href: string;
+};
+
+export type FooterLegalLink = {
+    label: string;
+    href: string;
+};
+

package/src/footer/vcard-footer.tsx

@@ -0,0 +1,72 @@
+import { ComponentProps } from "react";
+import { getOrganizationProfile } from "@c-rex/services/vcard";
+import { FooterShell } from "./footer-shell";
+import { OrganizationContactBlock } from "./organization-contact-block";
+import { SocialLinksBlock } from "./social-links-block";
+import { getTranslations } from "next-intl/server";
+
+/**
+ * Footer composition that is backed by VCARD profile data plus configured social links.
+ */
+export type VCardFooterProps = {
+    contactClassName?: string;
+    socialClassName?: string;
+    showOrganizationLogo?: boolean;
+} & Omit<ComponentProps<typeof FooterShell>, "left" | "right" | "bottom">;
+
+/**
+ * VCARD-based footer composition using organization profile and social/website blocks.
+ * Exposes className hooks to avoid copy/paste for common customer-specific styling changes.
+ */
+export const VCardFooter = async ({
+    contactClassName,
+    socialClassName,
+    showOrganizationLogo = true,
+    ...props
+}: VCardFooterProps = {}) => {
+    const t = await getTranslations();
+    const profile = await getOrganizationProfile();
+    const year = new Date().getFullYear();
+
+    return (
+        <FooterShell
+            left={
+                <OrganizationContactBlock
+                    profile={profile}
+                    className={contactClassName}
+                    showLogo={showOrganizationLogo}
+                />
+            }
+            right={
+                <>
+                    {profile.website && (
+                        <p className="text-sm">
+                            <a
+                                href={profile.website}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                                aria-label={t("footer.website.visitAriaLabel", {
+                                    organizationName: profile.organizationName,
+                                })}
+                            >
+                                {t("footer.website.visit")}
+                            </a>
+                        </p>
+                    )}
+                    <SocialLinksBlock
+                        links={profile.socialLinks}
+                        className={socialClassName}
+                        ariaLabel={t("footer.social.ariaLabel")}
+                    />
+                </>
+            }
+            bottom={
+                <>
+                    {profile.organizationName} &copy; {year}
+                </>
+            }
+            {...props}
+        />
+    );
+};