Skip to content

Commit ebb9f1b

Browse files
mpsalungggmpsalunggg
committed
feat: styling card user event
1 parent 3acc61e commit ebb9f1b

15 files changed

Lines changed: 184 additions & 119 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@radix-ui/react-separator": "^1.1.7",
3131
"@radix-ui/react-slot": "^1.2.3",
3232
"@radix-ui/react-tooltip": "^1.2.7",
33+
"@tanstack/react-query": "^5.85.5",
3334
"@tanstack/react-table": "^8.21.3",
3435
"@tiptap/extension-image": "^3.2.0",
3536
"@tiptap/extension-link": "^3.2.0",

‎pnpm-lock.yaml‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/[locale]/(public)/(user)/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function UserLayout({ children }: UserLayoutProps) {
1919
<ProtectedRoute>
2020
<section className="container mx-auto px-5 pt-24 pb-28">
2121
<div className="grid grid-cols-5 gap-8">
22-
<aside className="fixed right-0 bottom-0 left-0 col-span-1 mt-8 flex w-full flex-col justify-between gap-4 self-start rounded-lg bg-white lg:sticky lg:top-24 lg:flex-col lg:justify-start lg:bg-transparent dark:bg-slate-950">
22+
<aside className="mt-8 hidden w-full flex-col justify-between gap-4 self-start rounded-lg lg:sticky lg:top-24 lg:col-span-1 lg:flex lg:flex-col lg:justify-start lg:bg-transparent">
2323
<div className="flex items-center gap-4">
2424
<Avatar className="h-12 w-12">
2525
<AvatarImage src="" alt="profile" />
@@ -43,7 +43,7 @@ export default function UserLayout({ children }: UserLayoutProps) {
4343
</nav>
4444
</aside>
4545

46-
<div className="col-span-4">{children}</div>
46+
<div className="col-span-5 lg:col-span-4">{children}</div>
4747
</div>
4848
</section>
4949
</ProtectedRoute>

‎src/app/[locale]/layout.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { cookies } from "next/headers";
99
import { AuthJwtPayload } from "@/types";
1010
import { jwtDecode } from "jwt-decode";
1111
import { ThemeProvider } from "@/components/provider/ThemeProvider";
12+
import TanstackProvider from "@/components/provider/TanstackProvider";
1213
const sora = Sora({ subsets: ["latin"] });
1314

1415
type Props = {
@@ -57,11 +58,13 @@ export default async function LocaleRootLayout(props: Readonly<Props>) {
5758
<html lang={locale} suppressHydrationWarning>
5859
<body className={`${sora.className}`}>
5960
<NextIntlClientProvider messages={messages}>
60-
<AuthProvider payload={payload}>
61-
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
62-
{children}
63-
</ThemeProvider>
64-
</AuthProvider>
61+
<TanstackProvider>
62+
<AuthProvider payload={payload}>
63+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
64+
{children}
65+
</ThemeProvider>
66+
</AuthProvider>
67+
</TanstackProvider>
6568
<Toaster />
6669
</NextIntlClientProvider>
6770
</body>

‎src/components/common/Loader/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { LoaderIcon } from "lucide-react";
2+
3+
const Loader = () => {
4+
return (
5+
<div className="flex h-[45vh] items-center justify-center">
6+
<LoaderIcon className="size-12 animate-spin" />
7+
</div>
8+
);
9+
};
10+
export default Loader;

‎src/components/provider/TanstackProvider/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use client";
2+
3+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
4+
5+
const queryClient = new QueryClient();
6+
7+
const TanstackProvider = ({ children }: { children: React.ReactNode }) => {
8+
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
9+
};
10+
export default TanstackProvider;

‎src/components/ui/Badge/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ const badgeVariants = cva(
1515
soon: "border-transparent bg-green-500 text-white hover:bg-green-600",
1616
closed: "border-transparent bg-red-500 text-white hover:bg-red-600",
1717
open: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
18+
// for payment status
19+
PENDING: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
20+
SUCCESS: "border-transparent bg-green-500 text-white hover:bg-green-600",
21+
FAILED: "border-transparent bg-red-500 text-white hover:bg-red-600",
1822
},
1923
},
2024
defaultVariants: {

‎src/constants/event.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const EVENTS_TYPE = ["Conference", "Tech Talk", "Ngobar"];

‎src/domains/Events.ts‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ export const eventSchema = z.object({
44
id: z.number(),
55
title: z.string(),
66
description: z.string(),
7+
slug: z.string().optional(),
78
author: z.string(),
89
image: z.string(),
910
date: z.string().optional(),
1011
type: z.string(),
1112
location: z.string(),
1213
duration: z.string(),
1314
capacity: z.number(),
14-
status: z.enum(["open", "soon", "closed"]),
15-
Tags: z
15+
status: z.enum(["open", "soon", "closed", "comming soon"]),
16+
tags: z
1617
.array(
1718
z.object({
1819
id: z.number(),
@@ -21,7 +22,7 @@ export const eventSchema = z.object({
2122
})
2223
)
2324
.optional(),
24-
Speakers: z
25+
speakers: z
2526
.array(
2627
z.object({
2728
id: z.number(),
@@ -32,14 +33,12 @@ export const eventSchema = z.object({
3233
.optional(),
3334
registration_link: z.string(),
3435
price: z.number(),
35-
created_by: z.number(),
36-
updated_by: z.number(),
37-
deleted_by: z.number(),
3836
reservation_start_date: z.string().optional(),
39-
reseveration_end_date: z.string().optional(),
37+
reservation_end_date: z.string().optional(),
4038
created_at: z.string(),
4139
updated_at: z.string().optional(),
4240
deleted_at: z.string().optional(),
41+
additional_link: z.string().optional(),
4342
});
4443

4544
export type EventType = z.infer<typeof eventSchema>;
@@ -61,3 +60,20 @@ export const registrationSchema = z.object({
6160
});
6261

6362
export type RegistrationForm = z.infer<typeof registrationSchema>;
63+
64+
export const userEventSchema = z.object({
65+
id: z.number(),
66+
order_no: z.string(),
67+
event_id: z.number(),
68+
user_id: z.string(),
69+
name: z.string(),
70+
email: z.string(),
71+
phone_number: z.string(),
72+
image_proof_payment: z.string().url(),
73+
payment_date: z.string(),
74+
status: z.enum(["PENDING", "SUCCESS", "FAILED"]),
75+
created_at: z.string(),
76+
event_detail: eventSchema,
77+
});
78+
79+
export type UserEventType = z.infer<typeof userEventSchema>;

‎src/features/events/components/MyEventCard.tsx‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,54 @@
1-
import { FC } from "react";
21
import Image from "next/image";
32
import { Clock, Pin } from "lucide-react";
43
import Badge from "@/components/ui/Badge";
54
import { Card, CardContent, CardFooter } from "@/components/ui/Card";
6-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/Tooltip";
7-
import { EventType } from "@/domains/Events";
8-
import { useFormatDate } from "@/lib/format";
9-
import { Link } from "@/lib/navigation";
5+
import { UserEventType } from "@/domains/Events";
6+
import { useFormatDateEvent } from "@/lib/format";
107

11-
const MyEventCard: FC<{ data: EventType }> = ({ data }) => {
12-
const { id, title, date, image, status, duration, location } = data;
8+
const MyEventCard = ({ data }: { data: UserEventType }) => {
9+
const { order_no, status } = data;
1310

1411
return (
15-
<Link href={`/events/${id}`}>
12+
<section>
1613
<div className="grid gap-4 lg:grid-cols-4">
17-
<div className="bg-muted overflow-hidden rounded-lg">
14+
<div className="relative flex items-center justify-center overflow-hidden rounded-lg border">
15+
<div
16+
className="absolute inset-0 scale-110 bg-cover bg-center blur-xs"
17+
style={{
18+
backgroundImage: `url(${data.event_detail.image ?? "/assets/images/events/fallbackImage.webp"})`,
19+
}}
20+
/>
1821
<Image
19-
alt={String(id)}
20-
src={image ?? "/assets/images/events/fallbackImage.webp"}
22+
alt={`Event ${order_no}`}
23+
src={data.event_detail.image ?? "/assets/images/events/fallbackImage.webp"}
2124
width={540}
2225
height={240}
23-
className="object-cover object-center"
26+
className="relative z-10 object-cover object-center"
2427
/>
2528
</div>
2629
<Card className="flex size-full flex-col rounded-lg border shadow-md lg:col-span-3">
2730
<CardContent className="px-4 pt-4 pb-0">
28-
<Badge className="mb-2" variant={`${status}`}>
29-
{status}
30-
</Badge>
31-
<TooltipProvider>
32-
<Tooltip>
33-
<TooltipTrigger asChild>
34-
<h2 className="text-hmc-blue-600 line-clamp-2 text-base font-bold sm:text-xl">{title}</h2>
35-
</TooltipTrigger>
36-
<TooltipContent>{title}</TooltipContent>
37-
</Tooltip>
38-
</TooltipProvider>
31+
<div className="mb-2 flex items-center gap-2">
32+
<span className="text-xs font-medium text-gray-500">#{order_no}</span>
33+
<Badge variant={status}>{status}</Badge>
34+
</div>
35+
36+
<h2 className="text-hmc-blue-600 line-clamp-2 text-base font-bold sm:text-xl">{data.event_detail.title}</h2>
3937
</CardContent>
4038
<CardFooter className="mt-auto flex flex-col items-start gap-2 px-4 pt-3 pb-4">
41-
<p className="line-clamp-1">{useFormatDate(date)}</p>
4239
<div className="flex items-center gap-2">
43-
<Clock size={15} />
44-
<p className="text-sm">{duration}</p>
40+
<Clock size={15} className="text-gray-500" />
41+
<p className="text-sm">{useFormatDateEvent(data.event_detail.date as string) || "-"}</p>
4542
</div>
4643
<div className="flex items-center gap-2">
47-
<Pin size={15} />
48-
<p className="text-sm">{location}</p>
44+
<Pin size={15} className="text-gray-500" />
45+
<p className="line-clamp-1 text-sm">{data.event_detail.location || "-"}</p>
4946
</div>
5047
</CardFooter>
5148
</Card>
5249
</div>
53-
</Link>
50+
</section>
5451
);
5552
};
53+
5654
export default MyEventCard;

0 commit comments

Comments
 (0)