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

🧩 Converted header into separate component.

Browse Source
This commit is contained in:
sid
2024-10-25 14:32:24 +01:00
parent c418aa9a1c
commit 5c8abb4eb0
3 changed files with 49 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/Home.tsx
View File

@@ -1,33 +1,12 @@
import Header from '../components/custom/header';
export default function Home() {
return (
<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>
<a href="/" className="text-blue-500 hover:text-blue-700">
Home
</a>
</li>
<li>
<a href="/events" className="text-blue-500 hover:text-blue-700">
Events
</a>
</li>
<li>
<a href="/contact" className="text-blue-500 hover:text-blue-700">
Contact
</a>
</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>
<Header />
{/* Other page content */}
</div>
<main>
<section className="mb-8">
<h2 className="text-2xl font-semibold mb-4">Featured Events</h2>

42
components/custom/header.tsx Normal file
View File

@@ -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;

2
components/ui/button.tsx
View File

@@ -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: {