Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lego/feat/more accurate figma #54

Merged
merged 8 commits into from
Sep 30, 2024
Merged

Lego/feat/more accurate figma #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c442fcd
chore: move from poppins/cal to inter cuz figma
joseglego Sep 28, 2024
5a51f67
feat(Footer): more space on footer
joseglego Sep 28, 2024
e749b20
feat(TicketSaleFlow): more accurate to figma
joseglego Sep 28, 2024
60b2a50
feat(PurchaseOrder): more accurate to figma
joseglego Sep 28, 2024
5c54252
feat(MyEvents): more accurate to figma
joseglego Sep 29, 2024
0334994
feat(MyEvent): more accurate to figma
joseglego Sep 29, 2024
bcfedee
chore(libs): more accurate to figma
joseglego Sep 29, 2024
90265e2
feat(MyPurchaseOrders): looks more similar to other tables
joseglego Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export const Footer = () => {
return (
<footer className="border-t bg-background/95 text-sm text-primary">
<div className="container flex flex-col justify-between gap-4 py-8 md:flex-row">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<div>© {year} Proudly Powered by CommunityOS</div>
<div className="flex gap-2">
<div className="flex gap-3">
{socials.map(({ icon, name, url }) => (
<a
key={name}
Expand Down
2 changes: 1 addition & 1 deletion app/components/Login/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Login = () => {
return (
<div className="flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl border bg-background p-10 shadow-xl">
<div>
<h1 className="text-left font-cal text-2xl">Regístrate.</h1>
<h1 className="text-left text-2xl font-semibold">Regístrate.</h1>
<p className="text-left text-sm text-muted-foreground">
Mantente al tanto de las novedades de JavaScript Chile.
</p>
Expand Down
223 changes: 123 additions & 100 deletions app/components/MyEvent/MyEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import {
Mail,
EyeIcon,
EyeOffIcon,
Sparkles,
} from "lucide-react";
import { useState } from "react";
import QRCode from "react-qr-code";

import { Badge } from "~/components/ui/badge";
import { Button, buttonVariants } from "~/components/ui/button";
import { Card, CardContent, CardTitle } from "~/components/ui/card";
import { Separator } from "~/components/ui/separator";
import { formatDate, formatTime } from "~/utils/date";
import { formatCalendarDate, formatDate, formatTime } from "~/utils/date";
import {
redemptionStatusLabel,
redemptionStatusColor,
Expand Down Expand Up @@ -45,93 +45,114 @@ const Ticket = ({
: undefined;

return (
<Card className="h-full bg-white p-6 text-black">
<div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
<div className={cn(showQR ? "" : "blur-lg")}>
<QRCode className="mx-auto max-w-[90%]" value={ticket.id} />
<Card className="flex h-full flex-col justify-between gap-6 bg-white p-6 text-black">
<div className="flex w-full flex-col gap-6">
<div className="relative mx-auto mt-4 w-full max-w-[90%] text-center">
<div
className={cn(
"mx-auto max-w-[90%] overflow-hidden",
showQR ? "" : " max-w-[80%] overflow-hidden",
)}
>
<QRCode
className={cn("aspect-square w-full", showQR ? "" : "blur-md")}
value={ticket.id}
/>
</div>
</div>
<CardTitle className="text-center font-bold">
ID Ref: {ticketIdReference(ticket.id)}
</CardTitle>
<CardContent className="p-0 text-sm">
<div className="grid gap-3">
<ul className="grid gap-3">
<li className="flex items-center justify-between text-base">
<span className="shrink-0 font-bold">Evento</span>
<span className="text-right">{event.name}</span>
</li>
</ul>
<Separator className="my-2 bg-[#e7e5e4]" />
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="shrink-0 font-bold">Fecha de inicio</span>
<span className="text-right">
{formatDate(event.startDateTime as string)}
</span>
</li>
{event.endDateTime ? (
<li className="flex items-center justify-between">
<span className="shrink-0 font-bold">Fecha de fin</span>
<span className="text-right">
{formatDate(event.endDateTime as string)}
</span>
</li>
) : null}
</ul>
<Separator className="my-2 bg-[#e7e5e4]" />
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="shrink-0 font-bold">Tipo de Ticket</span>
<span className="text-right">{ticket.ticketTemplate.name}</span>
</li>
<li className="flex items-center justify-between">
<span className="shrink-0 font-bold">Estado</span>
<span className="text-right">
<span className="flex flex-row items-center gap-2">
<span
className={cn(
"flex h-2 w-2 rounded-full",
redemptionStatusColor(ticket.redemptionStatus),
)}
/>
{redemptionStatusLabel(ticket.redemptionStatus)}
</span>
</span>
</li>
<li className="flex items-center justify-between">
<span className="shrink-0 font-bold">Fecha de Compra</span>
<span className="text-right">
{formatCalendarDate(ticket.createdAt as string)}
</span>
</li>
</ul>
</div>
</CardContent>
</div>
<div className="flex flex-col gap-2 p-0 md:flex-row">
<Button
className="mt-8"
className={cn(
buttonVariants({ variant: "outline" }),
"flex grow flex-row gap-2 bg-white text-black",
)}
onClick={() => {
setShowQR((show) => !show);
}}
>
{showQR ? (
<>
<EyeIcon className="size-4" /> Ocultar QR
<EyeOffIcon className="size-4" /> Ocultar QR
</>
) : (
<>
<EyeOffIcon className="size-4" /> Ver QR
<EyeIcon className="size-4" /> Ver QR
</>
)}
</Button>
</div>
<CardTitle className="my-6 text-center">
ID Ref: {ticketIdReference(ticket.id)}
</CardTitle>
<CardContent className="text-sm">
<div className="grid gap-3">
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="font-semibold">Evento</span>
<span>{event.name}</span>
</li>
</ul>
<Separator className="my-2" />
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="font-semibold">Fecha de inicio</span>
<span>{formatDate(event.startDateTime as string)}</span>
</li>
{event.endDateTime ? (
<li className="flex items-center justify-between">
<span className="font-semibold">Fecha de fin</span>
<span>{formatDate(event.endDateTime as string)}</span>
</li>
) : null}
</ul>
<Separator className="my-2" />
<ul className="grid gap-3">
<li className="flex items-center justify-between">
<span className="font-semibold">Tipo de Ticket</span>
<span>{ticket.ticketTemplate.name}</span>
</li>
<li className="flex items-center justify-between">
<span className="font-semibold">Estado</span>
<span>
<Badge className="gap-2 text-black" variant="outline">
<span
className={cn(
"flex h-2 w-2 rounded-full",
redemptionStatusColor(ticket.redemptionStatus),
)}
/>
{redemptionStatusLabel(ticket.redemptionStatus)}
</Badge>
</span>
</li>
<li className="flex items-center justify-between">
<span className="font-semibold">Fecha de Compra</span>
<span>{formatDate(ticket.createdAt as string)}</span>
</li>
</ul>
</div>
<div className="mt-4 flex flex-col gap-2 md:flex-row">
{publicUrl ? (
<a
href={publicUrl}
target="_blank"
rel="noreferrer noopener"
className={cn(
buttonVariants({ variant: "outline" }),
"flex grow flex-row gap-2 bg-white text-black",
)}
>
Ver y Compartir <ExternalLink className="size-4" />
</a>
) : null}
{/*
{publicUrl ? (
<a
href={publicUrl}
target="_blank"
rel="noreferrer noopener"
className={cn(
buttonVariants({ variant: "outline" }),
"flex grow flex-row gap-2 bg-white text-black",
)}
>
<Sparkles className="size-4" />
Compartir
</a>
) : null}
{/*
<Button
className="flex grow flex-row gap-2 bg-white text-black"
variant="outline"
Expand All @@ -147,8 +168,7 @@ const Ticket = ({
<Mail className="size-4" /> Enviar por email
</Button>
*/}
</div>
</CardContent>
</div>
</Card>
);
};
Expand Down Expand Up @@ -184,8 +204,8 @@ export const MyEvent = ({ id }: { id: string }) => {
) : null}

{event ? (
<div className="flex w-full flex-col gap-4">
<div className="flex basis-4/12 flex-col gap-2">
<div className="flex w-full flex-col gap-6">
<div className="flex basis-4/12 flex-col gap-6">
<div
className={cn(
"mx-auto h-20 w-full rounded-md bg-primary/10 lg:h-40",
Expand All @@ -197,29 +217,32 @@ export const MyEvent = ({ id }: { id: string }) => {
: {}
}
/>
<h2 className="font-cal text-2xl">{event.name}</h2>
<p className="text-sm text-muted-foreground">{event.description}</p>
<div className="flex flex-row items-center gap-1 text-sm">
<Calendar className="size-4" />
{[formattedDate, formattedTime].filter(Boolean).join(" - ")}
<h2 className="text-2xl font-semibold">{event.name}</h2>
<p className="text-base text-muted-foreground">
{event.description}
</p>
<div className="flex flex-col gap-3 font-medium">
{formatedAddress ? (
<a
href={encodeURI(
`https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
)}
target="_blank"
className="flex flex-row items-center gap-2.5 text-sm"
rel="noreferrer"
>
<MapPin className="size-6" />
{formatedAddress}
<ExternalLink className="size-6" />
<span className="sr-only">Ver en Google Maps</span>
</a>
) : null}
<div className="flex flex-row items-center gap-2.5 text-sm">
<Calendar className="size-6" />
{[formattedDate, formattedTime].filter(Boolean).join(" - ")}
</div>
</div>
{formatedAddress ? (
<a
href={encodeURI(
`https://www.google.com/maps/search/${formatedAddress}?source=opensearch`,
)}
target="_blank"
className="flex flex-row items-center gap-1 text-sm"
rel="noreferrer"
>
<MapPin className="size-4" />
{formatedAddress}
<ExternalLink className="size-4" />
<span className="sr-only">Ver en Google Maps</span>
</a>
) : null}
</div>
<Separator className="my-2" />
<div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
{tickets.map((ticket) => (
<Ticket key={ticket.id} event={event} ticket={ticket} />
Expand Down
28 changes: 15 additions & 13 deletions app/components/MyEvent/MyEventLoadingSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,42 @@ import { Skeleton } from "~/components/ui/skeleton";

const LoadingCard = () => {
return (
<Card className="h-full p-6">
<Card className="flex h-full flex-col gap-2 p-6">
<Skeleton className="mx-auto size-60 rounded-md" />
<Skeleton className="mx-auto my-6 h-6 w-40" />
<Skeleton className="h-6 w-full" />
<Skeleton className="mx-auto h-8 w-40" />
<Skeleton className="h-8 w-full" />
<Separator className="my-2" />
<span className="flex flex-col gap-2">
<span className="flex flex-col gap-3">
<Skeleton className="h-6 w-full" />
<Skeleton className="h-6 w-full" />
</span>
<Separator className="my-2" />
<span className="flex flex-col gap-2">
<span className="flex flex-col gap-3">
<Skeleton className="h-6 w-full" />
<Skeleton className="h-6 w-full" />
<Skeleton className="h-6 w-full" />
</span>
<div className="mt-4 flex items-end justify-between">
<Skeleton className="h-8 w-24" />
<Skeleton className="h-8 w-24" />
<Separator className="my-2" />
<div className="flex flex-col items-end justify-between gap-3 md:flex-row">
<Skeleton className="h-8 w-full md:w-1/2" />
<Skeleton className="h-8 w-full md:w-1/2" />
</div>
</Card>
);
};

export const MyEventLoadingSkeleton = () => {
return (
<div className="flex w-full flex-col gap-4">
<div className="flex basis-4/12 flex-col gap-2">
<div className="flex w-full flex-col gap-6">
<div className="flex basis-4/12 flex-col gap-6">
<Skeleton className="h-20 w-full rounded-md bg-primary/10 lg:h-40" />
<Skeleton className="h-12 w-36" />
<Skeleton className="h-6 w-80" />
<Skeleton className="h-6 w-40" />
<Skeleton className="h-6 w-40" />
<div className="flex basis-4/12 flex-col gap-3">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-6 w-40" />
</div>
</div>
<Separator className="my-2" />
<div className="mx-auto grid w-full grid-cols-1 gap-4 md:grid-cols-3">
<div className="basis-full md:basis-1/3">
<LoadingCard />
Expand Down
Loading
Loading