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

Jump to bottom

feat: build single venue page #21

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: build single venue page #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Layout from './Layouts/DefaultLayout';
import Venues from './pages/Venues';
import Artists from './pages/Artists';
import Home from './pages/Home';
import SingleVenue from './pages/SingleVenue';

function App() {
return (
Expand All @@ -16,6 +17,7 @@ function App() {
<Route path="/shows" element={<Shows />} />
<Route path="/venues" element={<Venues />} />
<Route path="/artists" element={<Artists />} />
<Route path="/Singlevenue" element={<SingleVenue />} />
{/* <Route index element={<Home />} />
<Route path="about" element={<About />} /> */}
{/* <Route path="dashboard" element={<Dashboard />} /> */}
Expand Down
9 changes: 9 additions & 0 deletions src/assets/Rectangle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/gram.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/link.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/location.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/mail.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/phone.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 91 additions & 0 deletions src/pages/SingleVenue.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import { Link } from 'react-router-dom';
import singlevenue from '../assets/Rectangle.svg';
import link from '../assets/link.svg';
import mail from '../assets/mail.svg';
import phone from '../assets/phone.svg';
import gram from '../assets/gram.svg';
import location from '../assets/location.svg';

function SingleVenue() {
return (
<div className="flex flex-col gap-10 items-center sm:flex-row sm:justify-around sm:items-stretch pt-1 text-sm">
<div className="w-[35%] h-[auto] sm:w-[38%] md:w-[34%] ">
<img src={singlevenue} alt="a nice venue" />
</div>

<div className="text-center sm:text-justify">
<div className="font-black text-l sm:text-xl">
<h1>Park Square Live Music & Coffee</h1>
</div>
<div className="mt-1 text-[#172B4D] text-xs sm:text-sm">
<p>ID: 6391f28d531c042836e8a320</p>
</div>

<div className="text-[#172B4D] flex flex-row gap-6 mt-3 font-2 justify-center sm:inline-flex">
<p className="bg-slate-200 pr-1.5 pl-1.5 text-xs sm:text-sm rounded-full">
HipHop
</p>
<p className="bg-slate-200 pr-1.5 pl-1.5 text-xs sm:text-sm rounded-full">
Karaoke
</p>
<p className="bg-slate-200 pr-1.5 pl-1.5 text-xs sm:text-sm rounded-full">
Afro Beat
</p>
</div>
<div className="mt-5">
<div className="flex gap-5 text-[#172B4D] text-xs sm:hover:scale-x-110 sm:text-sm">
<img src={link} alt="link" />
<Link to="https://www.parksquare.com">
https://www.parksquare.com
</Link>
</div>
<div className="flex mt-3 gap-5 text-[#172B4D] text-xs sm:text-sm sm:hover:scale-x-110">
<img src={mail} alt="mail" />
<Link to="[email protected]">[email protected]</Link>
</div>
<div className="flex mt-3 gap-5 text-[#172B4D] text-xs sm:text-sm sm:hover:scale-x-110">
<img src={phone} alt="phone" />
<p>
<a href="tel:+2347063346262">0706 3346 262</a>
</p>
</div>
<div className="flex mt-3 gap-5 text-[#172B4D] text-xs sm:text-sm sm:hover:scale-x-110">
<img src={gram} alt="gram" />
<Link to="https://www.instagram.com/parksquare">
https://www.instagram.com/parksquare
</Link>
</div>
<div className="flex mt-3 gap-5 text-[#172B4D] text-xs sm:text-sm">
<img src={location} alt="location" />
<p>No. 3, Obasanjo rd. Yaba, Lagos State</p>
</div>
</div>

<div className="mt-8 sm:mt-6">
<div>
<h1 className="font-black text-l sm:text-xl">Upcoming Shows</h1>
<p className="text-[#172B4D] text-xs mt-3 sm:hover:scale-x-110 sm:mt-1 sm:text-sm">
<Link to="#">Karaoke Untammed</Link>
</p>

<p className="text-[#172B4D] mt-1 text-xs sm:hover:scale-x-110 sm:text-sm">
<Link to="#">A night with Burna boy</Link>
</p>
</div>
<div className="mt-6 sm:mt-4">
<h1 className="font-black text-l sm:text-xl">Past Shows</h1>
<p className="text-[#172B4D] mt-3 text-xs sm:hover:scale-x-110 sm:text-sm sm:mt-1">
<Link to="#">Let them hear</Link>
</p>
<p className="text-[#172B4D] mt-1 text-xs sm:hover:scale-x-110 sm:text-sm">
<Link to="#">A night with Fireboy</Link>
</p>
</div>
</div>
</div>
</div>
);
}

export default SingleVenue;