Shay/ticketchain
1
0
Fork 0
mirror of https://github.com/0xShay/ticketchain.git synced 2026-01-11 13:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Incorporated more shadcn components and improved colour branding.

Browse Source
This commit is contained in:
sid
2024-10-27 07:31:05 +00:00
parent 2c31807231
commit b150c85ced
2 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/events/page.tsx
View File

@@ -7,6 +7,7 @@ import Footer from '../../components/custom/footer';
import { ethers } from 'ethers'; import { ethers } from 'ethers';
import { getContract } from '@/lib/ethers'; import { getContract } from '@/lib/ethers';
import { fetchEvents } from '@/lib/fetchEvents'; import { fetchEvents } from '@/lib/fetchEvents';
import { Button } from '@/components/ui/button';
export const dynamic = 'force-dynamic'; export const dynamic = 'force-dynamic';
@@ -148,6 +149,7 @@ const EventsPage: React.FC = () => {
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
<div className="absolute inset-0 bg-black opacity-50 z-10"></div> <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
<br></br>
<div className="relative z-20 container mx-auto p-4 pt-16"> <div className="relative z-20 container mx-auto p-4 pt-16">
<Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}> <Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}>
@@ -161,37 +163,37 @@ const EventsPage: React.FC = () => {
</Suspense> </Suspense>
<div className="flex mt-4 space-x-4"> <div className="flex mt-4 space-x-4">
<div className="relative" ref={sortRef}> <div className="relative" ref={sortRef}>
<button <Button
className="bg-blue-500 text-white px-4 py-2 rounded" className="bg-light-purple bg-opacity-75 rounded"
onClick={() => setShowSortMenu(!showSortMenu)} onClick={() => setShowSortMenu(!showSortMenu)}
> >
Sort Sort
</button> </Button>
{showSortMenu && ( {showSortMenu && (
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30"> <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
<button onClick={() => setSortOption('price-asc')}> <Button variant="ghost" onClick={() => setSortOption('price-asc')}>
Price Ascending Price Ascending
</button> </Button>
<button onClick={() => setSortOption('price-desc')}> <Button variant="ghost" onClick={() => setSortOption('price-desc')}>
Price Descending Price Descending
</button> </Button>
<button onClick={() => setSortOption('date-asc')}> <Button variant="ghost" onClick={() => setSortOption('date-asc')}>
Date Ascending Date Ascending
</button> </Button>
<button onClick={() => setSortOption('date-desc')}> <Button variant="ghost" onClick={() => setSortOption('date-desc')}>
Date Descending Date Descending
</button> </Button>
</div> </div>
)} )}
</div> </div>
<div className="relative" ref={filterRef}> <div className="relative" ref={filterRef}>
<button <Button
className="bg-blue-500 text-white px-4 py-2 rounded" className="bg-light-purple bg-opacity-75 rounded"
onClick={() => setShowFilterMenu(!showFilterMenu)} onClick={() => setShowFilterMenu(!showFilterMenu)}
> >
Filters Filters
</button> </Button>
{showFilterMenu && ( {showFilterMenu && (
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30"> <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
<label className="flex items-center"> <label className="flex items-center">
@@ -244,6 +246,7 @@ const EventsPage: React.FC = () => {
<main> <main>
<section> <section>
<h2 className="text-2xl font-semibold text-white mb-4"> <h2 className="text-2xl font-semibold text-white mb-4">
<br></br>
Available Events Available Events
</h2> </h2>
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">

5
components/custom/EventDescription.tsx
View File

@@ -46,7 +46,7 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
</h1> </h1>
<Badge <Badge
variant="outline" variant="outline"
className="text-blue-600 bg-blue-100 px-3 py-1 rounded-full" className="text-light-purple bg-blue-100 px-3 py-1 rounded-full"
> >
Price: ${eventDetails.ticketPrice.toFixed(2)} Price: ${eventDetails.ticketPrice.toFixed(2)}
</Badge> </Badge>
@@ -74,7 +74,8 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
<CardFooter className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0"> <CardFooter className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<Button <Button
variant="default" variant="default"
className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700" // className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
className="w-full md: w-auto px-4 py-2 text-left hover:bg-purple hover:bg-opacity-75"
onClick={handleBuyNow} onClick={handleBuyNow}
> >
Buy now Using MetaMask Buy now Using MetaMask