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.

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

Added some Options and Features in Teams form #77

Merged
merged 4 commits into from
Aug 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 6 additions & 6 deletions app/teams/page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,20 @@ const TeamFinder = () => {


return (
<div className="p-4">
<div className="md:p-4 md:mx-14 mx-7">
<p className="text-2xl ml-4 mb-4 font-semibold tracking-wide">TEAM FINDER</p>
<div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 overflow-hidden mx-4">
<FiltersSidebar className="rounded-lg mb-4 md:mb-0" />
<FiltersSidebar className="rounded-lg mb-20px" />
<div className="overflow-y-auto p-4 bg-gray-900 text-white col-span-1 md:col-span-4 rounded-lg">
<div className="border-b-4 mb-4">
<div className="border-b-4 m mb-4">
<div className="flex justify-between mb-4">
<h2 className="text-2xl">Find Team</h2>
<button className="bg-orange-500 px-4 py-2 rounded" onClick={NavigateToCreateTeam}>Create Team</button>
</div>
<div className="mb-4 flex flex-wrap gap-2 justify-between">
<button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Raised</button>
<button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Sent</button>
<button className="bg-indigo-400 px-4 py-2 rounded text-sm">+ New Request</button>
<button className="bg-indigo-600 px-4 py-2 rounded text-sm">Request Raised</button>
<button className="bg-indigo-600 px-4 py-2 rounded text-sm">Request Sent</button>
<button className="bg-indigo-600 px-4 py-2 rounded text-sm">+ New Request</button>
</div>
</div>
{teams.map((team, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/FeatureSection/FeatureSectionGrid.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function FeaturesSectionGrid() {
className:
"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
},
{
{
title: "Most Games Included",
description:
"Join tournaments and play across a wide range of popular games.",
Expand Down
50 changes: 40 additions & 10 deletions components/FiltersSidebar.jsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,60 @@
import React from 'react';
import React from "react";

const FiltersSidebar = () => {
return (
<div className="p-4 bg-gray-800 text-white rounded-lg">
<h2 className="text-xl mb-4">Filters</h2>
<div class="bg-gray-800 p-4 rounded-lg ">
<form>
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-white">Filters</h2>
<button class="bg-gray-800 hover:bg-gray-600 text-white font md:py-2 md:px-4 rounded">
<input type="reset" value="Reset" className="cursor-pointer" />
</button>
</div>
<div className="mb-4">
<label className="block mb-2">Game</label>
<select className="w-full p-2 bg-gray-700 text-white">
<option>Select</option>
<select className="w-full p-2 rounded-md bg-gray-600 text-white" >
<option selected>Select Game</option>
<option className="text-sm">BGMI</option>
<option className="text-sm">Free Fire Max</option>
<option className="text-sm">Valorant</option>
<option className="text-sm">COD Mobile</option>
<option className="text-sm">Pokemon Unite</option>
<option className="text-sm">Clash of Clans</option>
<option className="text-sm">Cricket</option>
<option className="text-sm">NEW STATE Mobile</option>
<option className="text-sm">GTA V</option>
<option className="text-sm">League of Legends PC</option>
<option className="text-sm">FIFA 22</option>
<option className="text-sm">Brawl Stars</option>
<option className="text-sm">Apex Legends Mobile</option>
<option className="text-sm">Clash Royale</option>
<option className="text-sm">Mobile Legends Bang Bang</option>
</select>
</div>
<div className="mb-4">
<label className="block mb-2">Role</label>
<select className="w-full p-2 bg-gray-700 text-white">
<select className="w-full p-2 rounded-md bg-gray-600 text-white">
<option>Select role</option>
<option>Select role</option>
<option>Select role</option>
<option>Select role</option>
<option>Select role</option>
</select>
</div>
<div className="mb-4">
<label className="block mb-2">Language</label>
<select className="w-full p-2 bg-gray-700 text-white">
<option>Select Language</option>
<select className="w-full p-2 rounded-md bg-gray-600 text-white">
<option selected>Select Language</option>
<option >English</option>
<option >Hindi</option>
</select>
</div>
<button className="w-full mt-5 p-2 bg-indigo-400 text-white rounded-md">Apply</button>
<button className="w-full mt-5 p-2 bg-indigo-600 text-white rounded-md">
Apply
</button>
</form>
</div>
);
};

export default FiltersSidebar;
export default FiltersSidebar;
Loading
Loading