aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components/ui/imageCard.tsx
diff options
context:
space:
mode:
authorMohamedBassem <me@mbassem.com>2024-03-13 21:43:44 +0000
committerMohamed Bassem <me@mbassem.com>2024-03-14 16:40:45 +0000
commit04572a8e5081b1e4871e273cde9dbaaa44c52fe0 (patch)
tree8e993acb732a50d1306d4d6953df96c165c57f57 /apps/web/components/ui/imageCard.tsx
parent2df08ed08c065e8b91bc8df0266bd4bcbb062be4 (diff)
downloadkarakeep-04572a8e5081b1e4871e273cde9dbaaa44c52fe0.tar.zst
structure: Create apps dir and copy tooling dir from t3-turbo repo
Diffstat (limited to 'apps/web/components/ui/imageCard.tsx')
-rw-r--r--apps/web/components/ui/imageCard.tsx70
1 files changed, 70 insertions, 0 deletions
diff --git a/apps/web/components/ui/imageCard.tsx b/apps/web/components/ui/imageCard.tsx
new file mode 100644
index 00000000..f10ebdb5
--- /dev/null
+++ b/apps/web/components/ui/imageCard.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export function ImageCard({
+ className,
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ return (
+ <div
+ className={cn("h-96 overflow-hidden rounded-lg shadow-md", className)}
+ {...props}
+ />
+ );
+}
+
+export function ImageCardBanner({
+ className,
+ ...props
+}: React.ImgHTMLAttributes<HTMLImageElement>) {
+ return (
+ // eslint-disable-next-line @next/next/no-img-element
+ <img
+ className={cn("h-56 min-h-56 w-full object-cover", className)}
+ alt="card banner"
+ {...props}
+ />
+ );
+}
+
+export function ImageCardContent({
+ className,
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ return (
+ <div
+ className={cn(
+ "flex h-40 min-h-40 flex-col justify-between p-2",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export function ImageCardTitle({
+ className,
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ return (
+ <div
+ className={cn("order-first flex-none text-lg font-bold", className)}
+ {...props}
+ />
+ );
+}
+
+export function ImageCardBody({
+ className,
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ return <div className={cn("order-1", className)} {...props} />;
+}
+
+export function ImageCardFooter({
+ className,
+ ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+ return <div className={cn("order-last", className)} {...props} />;
+}