Frontend Thoda Thoda

Author: whysosaket

web/src/components/Home/EventCard.tsx

@@ -8,7 +8,7 @@ const EventCard = () => {
  initial={{ rotateY: 180, scale: 1.3 }}
  animate={{ rotateY: 0, scale: 1 }}
  transition={{ duration: 0.6 }}
- className="md:w-1/4 w-1/2 my-4 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+ className="md:w-1/4 md:mx-2 mx-8 my-4 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
  <a href="#">
  <img
  className="rounded-t-lg w-full opacity-90 max-w-md p-2"
@@ -27,7 +27,7 @@ const EventCard = () => {
  </p>
  <a
  href="#"
- className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-500 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800"
+ className="transition transform hover:-translate-y-0.5 inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-gray-400 rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800"
  >
  Register
  <svg

web/src/components/Home/TodaysQuestion.tsx

@@ -19,7 +19,7 @@ const TodaysQuestion = () => {
  </div>
  <Link
  to="/solve"
- className="bg-blue-900 hidden md:block text-white hover:bg-blue-900 hover:bg-opacity-10 bg-opacity-25 py-2 px-3 rounded-lg mx-2"
+ className="bg-blue-900 hidden md:block text-white hover:bg-blue-900 hover:bg-opacity-10 dark:bg-opacity-25 bg-opacity-60 py-2 px-3 rounded-lg mx-2"
  >
  Solve
  </Link>
@@ -28,7 +28,7 @@ const TodaysQuestion = () => {
  <p className="my-auto">Solved Today: <span className="text-xs">69 </span></p>
  <Link
  to="/solve"
- className="bg-blue-900 md:hidden text-white hover:bg-blue-900 hover:bg-opacity-10 bg-opacity-25 py-2 px-3 rounded-lg mx-2"
+ className="bg-blue-900 md:hidden text-white hover:bg-blue-900 hover:bg-opacity-10 dark:bg-opacity-25 bg-opacity-60 py-2 px-3 rounded-lg mx-2"
  >
  Solve
  </Link>

web/src/components/Home/UpcomingEvents.tsx

@@ -6,7 +6,9 @@ const UpcomingEvents = () => {
  <>
  <div className='my-4'>
  <h1 className="font-bold my-2 text-xl text-center">Upcoming Events</h1>
- <div className='flex justify-between w-4/5 mx-auto'>
+ <div className='flex md:flex-row flex-col md:justify-between md:w-4/5 mx-auto justify-center'>
+ <EventCard />
+ <EventCard />
  <EventCard />
  <EventCard />
  <EventCard />

web/src/components/Leaderboard/Entry.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Entry = () => {
+ return (
+ <>
+ <tr>
+ <td className="py-4 text-gray-500 font-semibold text-center">1</td>
+ <td className="py-4 text-blue-600 font-semibold text-center">John Doe</td>
+ <td className="py-4 text-center">2:35:10</td>
+ <td className="py-4 text-center">10:45 AM</td>
+ </tr>
+ </>
+ );
+};
+
+export default Entry;

web/src/components/Leaderboard/LeaderboardPane.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Entry from "./Entry";
+
+const LeaderboardPane = () => {
+ return (
+ <div className="md:px-24">
+ <div className="bg-gray-100 p-6 bg-opacity-10 rounded-lg">
+ <table className="min-w-full">
+ <thead>
+ <tr>
+ <th className="py-3 text-center">Rank</th>
+ <th className="py-3 text-center">Name</th>
+ <th className="py-3 text-center">Run Time</th>
+ <th className="py-3 text-center">Time Finished</th>
+ </tr>
+ </thead>
+ <tbody>
+ <Entry />
+ <Entry />
+ <Entry />
+ <Entry />
+ <Entry />
+ <Entry />
+ {/* Add more rows as needed */}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ );
+};
+
+export default LeaderboardPane;

web/src/components/Profile/ProfileCard.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+const ProfileCard = () => {
+ return (
+ <div>
+ <div className="md:px-16">
+ <div className="p-8 bg-white shadow mt-24 dark:bg-black dark:bg-opacity-5">
+ {" "}
+ <div className="grid grid-cols-1 md:grid-cols-3">
+ {" "}
+ <div className="grid grid-cols-3 text-center order-last md:order-first mt-5 md:mt-0">
+ {" "}
+ <div>
+ {" "}
+ <p className="font-bold text-gray-700 dark:text-white text-xl">22</p>{" "}
+ <p className="text-gray-400">Friends</p>{" "}
+ </div>{" "}
+ <div>
+ {" "}
+ <p className="font-bold text-gray-700 dark:text-white text-xl">10</p>{" "}
+ <p className="text-gray-400">Rank</p>{" "}
+ </div>{" "}
+ <div>
+ {" "}
+ <p className="font-bold text-gray-700 dark:text-white text-xl">89</p>{" "}
+ <p className="text-gray-400">Solved</p>{" "}
+ </div>{" "}
+ </div>{" "}
+ <div className="relative">
+ {" "}
+ <div className="w-48 h-48 bg-indigo-100 mx-auto rounded-full shadow-2xl absolute inset-x-0 top-0 -mt-24 flex items-center justify-center text-indigo-500">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ className="h-24 w-24"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ {" "}
+ <path
+ fillRule="evenodd"
+ d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+ clipRule="evenodd"
+ />
+ </svg>{" "}
+ </div>{" "}
+ </div>{" "}
+ <div className="space-x-8 flex justify-between mt-32 md:mt-0 md:justify-center">
+ <button className="text-white py-2 px-4 uppercase rounded bg-blue-500 hover:bg-blue-600 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5">
+ {" "}
+ Connect
+ </button>{" "}
+ <button className="text-white py-2 px-4 uppercase rounded bg-gray-700 hover:bg-gray-800 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5">
+ {" "}
+ Message
+ </button>{" "}
+ </div>
+ </div>{" "}
+ <div className="md:mt-20 mt-5 text-center border-b pb-12">
+ {" "}
+ <h1 className="text-4xl font-medium text-gray-700 dark:text-white">
+ Saket Aryan{" "}
+ </h1>{" "}
+ <p className="font-light text-gray-600 mt-3 dark:text-white">CSE - Z, 2025</p>{" "}
+ <p className="mt-8 text-gray-500">
+ Solution Manager - Creative Tim Officer
+ </p>{" "}
+ <p className="mt-2 text-gray-500">University of Computer Science</p>
+ </div>{" "}
+ <div className="mt-12 flex flex-col justify-center">
+ {" "}
+ <p className="text-gray-600 text-center font-light lg:px-16">
+ This is a custom piece about me and I would love to tell you more....
+ </p>{" "}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default ProfileCard;

web/src/components/TestCase.tsx

@@ -62,9 +62,9 @@ const TestCase = () => {
  >
  <h1 className="dark:text-white m-1 text-sm font-semibold">Example Testcase</h1>
  <input placeholder="Enter Testcase" className='border-none w-full h-12 my-1 p-3 bg-black font-bold dark:bg-dark5 bg-opacity-10 text-gray-600 dark:text-gray-200 rounded-lg text-sm' ref={inputRef} />
- <div className="flex justify-end p-2">
- <button className="bg-dark5 hover:bg-dark4 rounded-md px-4 py-2 font-semibold mx-2">Run</button>
- <button className="bg-dark5 hover:bg-dark4 rounded-md px-4 py-2 font-semibold">Submit</button>
+ <div className="flex justify-end p-2 text-black dark:text-gray-300">
+ <button className="bg-dark5 bg-opacity-30 dark:bg-opacity-100 dark:hover:bg-dark4 hover:bg-slate-400 rounded-md px-4 py-2 font-semibold mx-2">Run</button>
+ <button className="bg-dark5 bg-opacity-30 dark:bg-opacity-100 dark:hover:bg-dark4 hover:bg-slate-400 rounded-md px-4 py-2 font-semibold">Submit</button>
  </div>
  </div>
  </div>

web/src/pages/Home.tsx

@@ -5,7 +5,7 @@ import UpcomingEvents from "../components/Home/UpcomingEvents";
 const Home = () => {
  return (
  <>
- <div className="p-2 bg-no-repeat bg-fixed dark:bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black">
+ <div className="p-2 bg-no-repeat bg-fixed min-h-screen dark:bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black">
  <motion.h1
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}

web/src/pages/Leaderboard.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
+import {motion} from "framer-motion";
+import LeaderboardPane from "../components/Leaderboard/LeaderboardPane"
 
 const Leaderboard = () => {
  return (
- <div>Leaderboard</div>
+ <motion.div initial={{x: -300}} animate={{x: 0}} className="p-4 bg-no-repeat bg-fixed min-h-screen dark:bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black">
+ <motion.h1 initial={{x: -1000}} animate={{x: 0}} transition={{delay: .3}} className='text-center my-4 text-4xl font-semibold '><span className='text-blue-500'>LEADER</span>BOARD</motion.h1>
+ <LeaderboardPane />
+ </motion.div>
  )
 }
 

web/src/pages/Profile.tsx

@@ -1,8 +1,14 @@
 import React from 'react'
+import ProfileCard from '../components/Profile/ProfileCard';
+import {motion} from "framer-motion"
 
 const Profile = () => {
  return (
- <div>Profile</div>
+ <>
+ <motion.div initial={{x: -200}} animate={{x: 0}} className="p-4 bg-no-repeat bg-fixed min-h-screen dark:bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black">
+ <ProfileCard />
+ </motion.div>
+ </>
  )
 }