feat: add project languages

src/components/Projects/ListProjectSolutions.tsx

@@ -15,6 +15,40 @@ import { VoteButton } from './VoteButton.tsx';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { cn } from '../../lib/classname.ts';
 
+const languageColors = new Map([
+  ['JavaScript', 'bg-[#f1e05a]'],
+  ['Python', 'bg-[#3572A5]'],
+  ['Java', 'bg-[#b07219]'],
+  ['HTML', 'bg-[#e34c26]'],
+  ['CSS', 'bg-[#563d7c]'],
+  ['C++', 'bg-[#f34b7d]'],
+  ['C', 'bg-[#555555]'],
+  ['Go', 'bg-[#00ADD8]'],
+  ['TypeScript', 'bg-[#2b7489]'],
+  ['Shell', 'bg-[#89e051]'],
+  ['Ruby', 'bg-[#701516]'],
+  ['PHP', 'bg-[#4F5D95]'],
+  ['Rust', 'bg-[#dea584]'],
+  ['Swift', 'bg-[#ffac45]'],
+  ['Kotlin', 'bg-[#A97BFF]'],
+  ['Dart', 'bg-[#00B4AB]'],
+  ['Scala', 'bg-[#c22d40]'],
+  ['Objective-C', 'bg-[#438eff]'],
+  ['Vue', 'bg-[#41b883]'],
+  ['R', 'bg-[#198CE7]'],
+  ['Perl', 'bg-[#0298c3]'],
+  ['Haskell', 'bg-[#5e5086]'],
+  ['Lua', 'bg-[#000080]'],
+  ['Matlab', 'bg-[#e16737]'],
+  ['Vim script', 'bg-[#199f4b]'],
+  ['Elixir', 'bg-[#6e4a7e]'],
+  ['Erlang', 'bg-[#B83998]'],
+  ['Clojure', 'bg-[#db5855]'],
+  ['Markdown', 'bg-[#083fa1]'],
+  ['TeX', 'bg-[#3D6117]'],
+  ['SQL', 'bg-[#e38c00]'],
+]);
+
 export interface ProjectStatusDocument {
   _id?: string;
 
@@ -24,6 +58,7 @@ export interface ProjectStatusDocument {
   startedAt?: Date;
   submittedAt?: Date;
   repositoryUrl?: string;
+  languages?: string[];
 
   upvotes: number;
   downvotes: number;
@@ -234,16 +269,15 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
 
       <div className="flex min-h-[500px] flex-col divide-y divide-gray-100">
         {solutions?.data.map((solution, counter) => {
-          const isVisited = alreadyVisitedSolutions[solution._id!];
           const avatar = solution.user.avatar || '';
+          const languages = solution?.languages || [];
 
           return (
             <div
               key={solution._id}
-              className={
-                'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0'
-              }
+              className="flex flex-col gap-2 py-2 text-sm text-gray-500"
             >
+              <div className="flex flex-col justify-between gap-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0">
                 <div className="flex items-center gap-1.5">
                   <img
                     src={
@@ -303,6 +337,24 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                   </a>
                 </div>
               </div>
+
+              <div className="flex justify-end gap-2.5">
+                {languages.map((language) => (
+                  <span
+                    key={language}
+                    className="flex items-center gap-2 text-sm"
+                  >
+                    <span
+                      className={cn(
+                        'h-2 w-2 rounded-full',
+                        languageColors.get(language) || 'bg-gray-400',
+                      )}
+                    />
+                    {language}
+                  </span>
+                ))}
+              </div>
+            </div>
           );
         })}
       </div>

src/components/Projects/SubmitProjectModal.tsx

@@ -170,10 +170,19 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
         projectUrlExists: 'success',
       });
 
+      const languagesUrl = `${mainApiUrl}/languages`;
+      const languagesResponse = await fetch(languagesUrl);
+      let languages: string[] = [];
+      if (languagesResponse.ok) {
+        const languagesData = await languagesResponse.json();
+        languages = Object.keys(languagesData || {})?.slice(0, 4);
+      }
+
       const submitProjectUrl = `${import.meta.env.PUBLIC_API_URL}/v1-submit-project/${projectId}`;
       const { response: submitResponse, error } =
         await httpPost<SubmitProjectResponse>(submitProjectUrl, {
           repositoryUrl: repoUrl,
+          languages,
         });
 
       if (error || !submitResponse) {
@@ -272,7 +281,7 @@ export function SubmitProjectModal(props: SubmitProjectModalProps) {
 
         <button
           type="submit"
-          className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50 text-sm"
+          className="mt-2 w-full rounded-lg bg-black p-2 text-sm font-medium text-white disabled:opacity-50"
           disabled={isLoading}
         >
           {isLoading ? 'Verifying...' : 'Verify and Submit'}