Skip to content

Commit

Permalink
style: teams page
Browse files Browse the repository at this point in the history 
improved ui of /teams page
  • Loading branch information
@Abhish7k
Abhish7k committed Aug 25, 2024
1 parent 3a37732 commit f63b3ea
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 57 deletions.
12 changes: 6 additions & 6 deletions app/teams/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@ const TeamFinder = () => {
};

return (
<div className="mt-20 px-10 xl:px-[12%] min-h-[70vh]">
<div className="mt-20 px-5 md:px-10 xl:px-[12%] min-h-[70vh] transition-all">
<h1 className="text-3xl ml-4 mb-14 font-semibold tracking-tight">
Team Finder
</h1>

<div className="mx-5 p-2 grid grid-cols-1 lg:grid-cols-10 overflow-hidden">
<FiltersSidebar className="" />

<Card className="mt-5 lg:mt-0 lg:ml-5 col-span-1 lg:col-span-7">
<div className="mx-5 p-2 grid gap-5 grid-cols-1 lg:grid-cols-10 overflow-hidden transition-all">
<Card className="mt-5 lg:mt-0 lg:ml-5 col-span-1 lg:col-span-7 transition-all">
<CardHeader className="flex flex-col gap-5">
<CardTitle className="flex items-center justify-between">
<h2 className="text-2xl">Find Team</h2>
Expand All @@ -74,12 +72,14 @@ const TeamFinder = () => {
</div>
</CardHeader>

<CardContent className="min-h-80 lg:h-full border-t">
<CardContent className="min-h-80 lg:h-full border-t pt-5 transition-all">
{teams.map((team, index) => (
<TeamCard key={index} team={team} />
))}
</CardContent>
</Card>

<FiltersSidebar className="" />
</div>
</div>
);
Expand Down
104 changes: 53 additions & 51 deletions components/FiltersSidebar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,59 @@
import React from "react";
import { Button } from "../@/components/ui/button";

const FiltersSidebar = () => {
return (
<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 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 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 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-600 text-white rounded-md">
Apply
</button>
<div class="p-4 rounded-lg col-span-1 lg:col-span-3 h-fit border shadow transition-all">
<form>
<div class="flex justify-between items-center mb-4">
<div className="flex justify-between items-center w-full">
<div class="text-xl font-semibold">Filters</div>
<Button variant="outline" className="transition-all">
<input type="reset" value="Reset" className="cursor-pointer" />
</Button>
</div>
</div>

<div className="mb-4">
<label className="block mb-2">Game</label>
<select className="w-full p-2 rounded-md bg-background border">
<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 rounded-md bg-background border">
<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 rounded-md bg-background border">
<option selected>Select Language</option>
<option>English</option>
<option>Hindi</option>
</select>
</div>

<Button className="w-full mt-5">Apply</Button>
</form>
</div>
);
Expand Down

0 comments on commit f63b3ea

Please sign in to comment.