init

2026-01-11 13:13:25 +00:00 · 2024-10-25 15:00:00 +01:00
parent 005aaf12f8 5c8abb4eb0
commit 54f806e06b
5 changed files with 79 additions and 152 deletions
--- a/app/Home.tsx
+++ b/app/Home.tsx
@@ -1,44 +1,30 @@
+import Header from '../components/custom/header';
+
 export default function Home() {
  return (
-    <div className="container">
-      <header className="header">
-        <title>Event Chain</title>
-        <h1 className="text-8xl text-center text-blue-700">Ticket Chain</h1>
-        <nav className="nav">
-          <ul>
-            <li>
-              <a href="/">Home</a>
-            </li>
-            <li>
-              <a href="/events">Events</a>
-            </li>
-            <li>
-              <a href="/contact">Contact</a>
-            </li>
-          </ul>
-        </nav>
-        <input
-          type="text"
-          placeholder="Search concerts..."
-          className="search-bar"
-        />
-      </header>
+    <div className="container mx-auto p-4">
+      <div>
+        <Header />
+        {/* Other page content */}
+      </div>
      <main>
-        <section>
-          <h2>Featured Events</h2>
-          <p>No events available at the moment.</p>
+        <section className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
+          <p className="text-gray-600">No events available at the moment.</p>
        </section>
        <section>
-          <h2>Upcoming Events</h2>
-          <ul>
+          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
+          <ul className="list-disc list-inside">
            <li>Event 1 - Date</li>
            <li>Event 2 - Date</li>
            <li>Event 3 - Date</li>
          </ul>
        </section>
      </main>
-      <footer>
-        <p>&copy; 2024 Ticket Chain. All rights reserved.</p>
+      <footer className="text-center mt-8">
+        <p className="text-gray-500">
+          &copy; 2024 Ticket Chain. All rights reserved.
+        </p>
      </footer>
    </div>
  );
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,26 @@
 import type { Metadata } from 'next';
-import localFont from 'next/font/local';
+// import localFont from 'next/font/local';
 import './globals.css';

-const geistSans = localFont({
-  src: './fonts/GeistVF.woff',
-  variable: '--font-geist-sans',
-  weight: '100 900',
-});
-const geistMono = localFont({
-  src: './fonts/GeistMonoVF.woff',
-  variable: '--font-geist-mono',
-  weight: '100 900',
-});
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+// const geistSans = localFont({
+//   src: './fonts/GeistVF.woff',
+//   variable: '--font-geist-sans',
+//   weight: '100 900',
+// });
+// const geistMono = localFont({
+//   src: './fonts/GeistMonoVF.woff',
+//   variable: '--font-geist-mono',
+//   weight: '100 900',
+// });

 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Ticket Chain',
+  description: 'A blockchain-based ticketing system.',
 };

 export default function RootLayout({
@@ -24,12 +29,8 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en ">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
    </html>
  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,105 +3,3 @@ import Home from './Home';
 export default function Page() {
  return <Home />;
 }
-
-// import Image from 'next/image';
-//
-// export default function Home() {
-//   return (
-//     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-//       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-//         <Image
-//           className="dark:invert"
-//           src="https://nextjs.org/icons/next.svg"
-//           alt="Next.js logo"
-//           width={180}
-//           height={38}
-//           priority
-//         />
-//         <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-//           <li className="mb-2">
-//             Get started by editing{' '}
-//             <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-//               app/page.tsx
-//             </code>
-//             .
-//           </li>
-//           <li>Save and see your changes instantly.</li>
-//         </ol>
-//
-//         <div className="flex gap-4 items-center flex-col sm:flex-row">
-//           <a
-//             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-//             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-//             target="_blank"
-//             rel="noopener noreferrer"
-//           >
-//             <Image
-//               className="dark:invert"
-//               src="https://nextjs.org/icons/vercel.svg"
-//               alt="Vercel logomark"
-//               width={20}
-//               height={20}
-//             />
-//             Deploy now
-//           </a>
-//           <a
-//             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-//             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-//             target="_blank"
-//             rel="noopener noreferrer"
-//           >
-//             Read our docs
-//           </a>
-//         </div>
-//       </main>
-//       <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-//         <a
-//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-//           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           <Image
-//             aria-hidden
-//             src="https://nextjs.org/icons/file.svg"
-//             alt="File icon"
-//             width={16}
-//             height={16}
-//           />
-//           Learn
-//         </a>
-//         <a
-//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-//           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           <Image
-//             aria-hidden
-//             src="https://nextjs.org/icons/window.svg"
-//             alt="Window icon"
-//             width={16}
-//             height={16}
-//           />
-//           Examples
-//         </a>
-//         <a
-//           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-//           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           <Image
-//             aria-hidden
-//             src="https://nextjs.org/icons/globe.svg"
-//             alt="Globe icon"
-//             width={16}
-//             height={16}
-//           />
-//           Go to nextjs.org →
-//         </a>
-//       </footer>
-//     </div>
-//   );
-// }
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -0,0 +1,42 @@
+// components/Header.js
+import React from 'react';
+import Link from 'next/link';
+
+const Header = () => (
+  <div className="container mx-auto p-4">
+    <header className="header text-center mb-8">
+      <h1 className="text-4xl font-bold text-blue-700">Ticket Chain</h1>
+      <nav className="nav mt-4">
+        <ul className="flex justify-center space-x-4">
+          <li>
+            <Link href="/" className="text-blue-500 hover:text-blue-700">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link href="/events" className="text-blue-500 hover:text-blue-700">
+              Events
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact" className="text-blue-500 hover:text-blue-700">
+              Contact
+            </Link>
+          </li>
+          <li>
+            <button className="bg-blue-500 text-white px-4 rounded hover:bg-blue-700">
+              Login
+            </button>
+          </li>
+        </ul>
+      </nav>
+      <input
+        type="text"
+        placeholder="Search events..."
+        className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+      />
+    </header>
+  </div>
+);
+
+export default Header;
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';

 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {