added platform icons to cards, fix #11

README.md

@@ -1,3 +1,5 @@
+![](./screenshot.png)
+
 <!-- # React + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

src/App.jsx

@@ -1,11 +1,16 @@
 import { useEffect, useState } from "react"
 import Card from "./components/Card"
-import { compareDates } from "./utils"
+import { compareDates, platformIcons } from "./utils"
+import clear from "./assets/clear.png"
+import github from "./assets/github.png"
+
 
 function App() {
   const [contests, setContests] = useState([])
-  const platforms = ["AtCoder", "CodeChef", "Codeforces", "GeeksforGeeks", "LeetCode"]
   const [selectedPlatforms, setSelectedPlatforms] = useState({})
+
+  const platforms = ["AtCoder", "CodeChef", "Codeforces", "GeeksforGeeks", "LeetCode"]
+
   const url = import.meta.env.VITE_API_URL
 
   useEffect(() => {
@@ -27,35 +32,46 @@ function App() {
     <div className="tracking-tight font-['Atkinson_Hyperlegible'] flex flex-col items-center h-screen px-1 py-2">
       <div className="flex px-2 items-end justify-center flex-wrap gap-2">
         <div className="text-6xl tracking-tighter">Contests</div>
-        <div className="border p-2 mb-2 h-8 inline-flex items-center text-xl tracking-tighter decoration-1 decoration-gray-200 underline hover:decoration-gray-950 hover:border-gray-950">
-          <a href="https://github.com/er-knight/contests">GitHub</a>
+        <div className="border pl-1 pr-2 mb-2 h-8 inline-flex items-center text-xl tracking-tighter decoration-1 decoration-gray-200 underline hover:decoration-gray-950 hover:border-gray-950">
+          <img src={github} width={24} height={24}></img>
+          <a href="https://github.com/nobleknightt/contests" target="_blank">GitHub</a>
         </div>
       </div>
-      <div className="p-1 text-center">
-        <span>Built with </span>
-        <a href="https://github.com/er-knight/contests/tree/main/app/src/App.jsx" className="decoration-1 decoration-gray-200 underline hover:decoration-gray-950">React</a>
-        <span> and </span>
-        <a href="https://github.com/er-knight/contests/tree/main/app/src/App.jsx" className="decoration-1 decoration-gray-200 underline hover:decoration-gray-950">Tailwind CSS</a>
-        <span> with little help from </span>
-        <a href="https://github.com/er-knight/contestsdb" className="decoration-1 decoration-gray-200 underline hover:decoration-gray-950">Python</a>
-      </div>
       <div className="flex flex-wrap w-full items-center justify-center p-1 mb-2 gap-1">
         {
           platforms.map(platform => (
             <div
               key={platform.toLowerCase()}
-              className={`border px-2 py-1 hover:cursor-pointer hover:border-gray-950 ${selectedPlatforms[platform]
+              className={`flex gap-2 border px-2 py-1 hover:cursor-pointer hover:border-gray-950 ${selectedPlatforms[platform]
                 ? 'bg-blue-200'
                 : 'bg-white'
                 }`}
               onClick={() => setSelectedPlatforms({
                 ...selectedPlatforms, [platform]: !selectedPlatforms[platform]
               })}
-            >{platform}</div>
+            >
+              <img src={platformIcons[platform]} width={24} height={24}></img>
+              {platform}
+            </div>
           ))
         }
+        <div
+          className={`flex items-center justify-center gap-1 border pl-1 pr-2 py-1 hover:cursor-pointer hover:border-gray-950 ${Object.values(selectedPlatforms).filter((value) => value).length > 0
+            ? 'bg-blue-200'
+            : 'bg-white'
+            }`}
+          onClick={() => {
+            setSelectedPlatforms(
+              platforms.reduce((_selectedPlatforms, platform) => {
+                return {
+                  ..._selectedPlatforms, [platform]: false,
+                }
+              }, {})
+            )
+          }}
+        ><img src={clear} width={24} height={24} className="p-1"></img>Clear</div>
       </div>
-      <div className="grow overflow-auto flex flex-col w-fit  px-1 gap-1 md:w-[752px]">
+      <div className="grow overflow-auto flex flex-col w-fit px-1 gap-1 md:w-[752px]">
         {
           [].concat(contests).sort(
             (a, b) => compareDates(a.start_time, b.start_time)
@@ -72,6 +88,11 @@ function App() {
           ))
         }
       </div>
+      <div className="pt-1">
+        <p className="inline-flex items-center justify-center gap-1 flex-wrap">
+          Built with <img src="https://img.icons8.com/?size=100&id=123603&format=png&color=000000" width={16} height={16} className="inline"></img> React, <img src="https://img.icons8.com/?size=100&id=CIAZz2CYc6Kc&format=png&color=000000" width={16} height={16} className="inline"></img> Tailwind and <img src="https://img.icons8.com/?size=100&id=Mjt9Tkm04cgv&format=png&color=000000" width={16} height={16} className="inline"></img> Love.
+        </p>
+      </div>
     </div>
   )
 }

src/components/Card.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { formatDate, formatSeconds } from "../utils"
+import { formatDate, formatSeconds, platformIcons } from "../utils"
 
 function Card({ platform, title, url, startTime, duration, isVisible }) {
 
@@ -42,8 +42,11 @@ function Card({ platform, title, url, startTime, duration, isVisible }) {
 
     return (
         <div className={`${isVisible ? 'flex' : 'hidden'} flex-col border p-2 gap-1 w-full hover:border-gray-950`}>
-            <div className="flex gap-1 flex-wrap">
-                <div>{platform}</div>
+            <div className="flex gap-2 flex-wrap">
+                <div className="flex gap-2">
+                    <img src={platformIcons[platform]} width={24} height={24}></img>
+                    {platform}
+                </div>
                 <div className="flex gap-2">
                     <div className={`inline-flex items-center text-sm border px-1 ${status == "Completed" ? "bg-red-300" : "bg-green-200"}`
                     }>{status}</div>
@@ -54,7 +57,7 @@ function Card({ platform, title, url, startTime, duration, isVisible }) {
                     }
                 </div>
             </div>
-            <div className="text-xl text-wrap underline decoration-1 decoration-gray-200 hover:decoration-gray-950"><a href={url}>{title}</a></div>
+            <div className="text-xl text-wrap underline decoration-1 decoration-gray-200 hover:decoration-gray-950"><a href={url} target="_blank">{title}</a></div>
             <div className="flex gap-2 flex-wrap">
                 <div className="border px-1">{formatDate(startTime)}</div>
                 <div className="border px-1">{formatSeconds(duration)}</div>

src/utils/index.js

@@ -1,3 +1,9 @@
+import AtCoder from "../assets/atcoder.png"
+import CodeChef from "../assets/codechef.png"
+import Codeforces from "../assets/codeforces.png"
+import GeeksforGeeks from "../assets/geeksforgeeks.png"
+import LeetCode from "../assets/leetcode.png"
+
 function formatDate(isoFormatStr) {
     const date = new Date(isoFormatStr)
     let options = {
@@ -37,4 +43,12 @@ function compareDates(first, second) {
     return firstDate - secondDate
 }
 
-export { formatDate, formatSeconds, compareDates }
+const platformIcons = {
+    "AtCoder": AtCoder,
+    "CodeChef": CodeChef,
+    "Codeforces": Codeforces,
+    "GeeksforGeeks": GeeksforGeeks,
+    "LeetCode": LeetCode
+}
+
+export { formatDate, formatSeconds, compareDates, platformIcons }

vite.config.js

@@ -4,5 +4,6 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/contests/'
+  base: '/contests/',
+  assetsInclude: ['**/*.png']
 })