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

Front end is Good

Browse Source
This commit is contained in:
Adwit Mukherji
2024-10-26 00:27:09 +01:00
parent 190be48ab0
commit d1c562c8f4
6 changed files with 122 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/custom/header.tsx
View File

@@ -3,29 +3,38 @@ import React, { useState } from 'react';
import Link from 'next/link';
const Header = () => {
const [mouseX, setMouseX] = useState(0);
const [mouseY, setMouseY] = useState(0);
const [mouseX, setMouseX] = useState(-1);
const [mouseY, setMouseY] = useState(-1);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
setMouseX(e.clientX);
setMouseY(e.clientY);
};
const handleMouseLeave = () => {
setMouseX(-1);
setMouseY(-1);
};
return (
<div
className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
<div
className="absolute inset-0 pointer-events-none"
style={{
border: '1px solid transparent',
background: `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`,
background:
mouseX >= 0 && mouseY >= 0
? `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`
: 'none',
backgroundClip: 'padding-box, border-box',
}}
></div>
<div className="container mx-auto px-6 py-5 flex justify-between items-center">
<h1 className="text-2xl font-bold text-white">Ticket Chain</h1>
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
<h1 className="text-2xl font-Ariel-bold text-white">TicketChain</h1>
<nav className="nav">
<ul className="flex space-x-6">
<li>
@@ -36,11 +45,10 @@ const Header = () => {
</Link>
</li>
<li>
<Link
href="/TicketListings"
className="text-white hover:text-blue-500 transition-colors duration-300"
>
Events
<Link href="/TicketListings" legacyBehavior>
<a className="text-white hover:text-blue-500 transition-colors duration-300">
Events
</a>
</Link>
</li>
<li>