Resources Seite für Desktop-client

apps/hub/app/(app)/resources/_components/Card.tsx

@@ -0,0 +1,43 @@
+import { Download } from "lucide-react";
+import Image, { StaticImageData } from "next/image";
+import { ReactNode } from "react";
+
+type ResourceCardProps = {
+	title?: string;
+	description?: string;
+	btnLabel?: string;
+	imageAlt?: string;
+	image?: StaticImageData;
+	btnHref?: string;
+	BtnIcon: ReactNode;
+};
+
+export default function ResourceCard({
+	title,
+	BtnIcon,
+	description,
+	btnLabel: downloadLabel,
+	imageAlt,
+	image,
+	btnHref: downloadHref,
+}: ResourceCardProps) {
+	return (
+		<div className="hero bg-base-200 rounded-xl shadow-lg p-8">
+			<div className="hero-content flex-col lg:flex-row">
+				{image && (
+					<div className="max-w-sm w-full">
+						<Image src={image} alt={imageAlt ?? ""} width={600} className="rounded-lg shadow-2xl" />
+					</div>
+				)}
+				<div className="lg:ml-10 mt-6 lg:mt-0">
+					<h1 className="text-3xl font-bold">{title}</h1>
+					<p className="py-2 max-w-2xl text-base">{description}</p>
+					<a href={downloadHref} className="btn btn-primary mt-4">
+						{BtnIcon}
+						{downloadLabel}
+					</a>
+				</div>
+			</div>
+		</div>
+	);
+}