From fbb967c07aa65edb25fc1fb1523c012cdec4090c Mon Sep 17 00:00:00 2001
From: BhJaipa <105307427+BhJaipal@users.noreply.github.com>
Date: Thu, 2 May 2024 00:24:19 +0530
Subject: [PATCH] Icons for languages

---
 frontend/components/VCard.vue  | 61 +++++++++++++++++++++++++++++++
 frontend/nuxt.config.ts        |  6 ++--
 frontend/pages/about/index.vue | 15 ++++++++
 frontend/pages/index.vue       |  4 +++
 frontend/plugins/langNames.ts  | 65 ++++++++++++++++++++++++++++++++++
 frontend/tsconfig.json         |  2 +-
 6 files changed, 148 insertions(+), 5 deletions(-)
 create mode 100644 frontend/components/VCard.vue

diff --git a/frontend/components/VCard.vue b/frontend/components/VCard.vue
new file mode 100644
index 0000000..1b08697
--- /dev/null
+++ b/frontend/components/VCard.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { UCard } from "#components";
+let props = defineProps<{
+	color?: string;
+	title?: string;
+	"prepend-icon"?: string;
+	"append-icon"?: string;
+	subtitle?: string;
+	text?: string;
+	loading?: boolean;
+	class?: string;
+}>();
+let ui = reactive({
+	background:
+		"bg-" + (props.color != undefined ? props.color : "indigo") + "-950",
+	header: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	},
+	body: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	},
+	footer: {
+		background:
+			"bg-" + (props.color != undefined ? props.color : "indigo") + "-950"
+	}
+});
+</script>
+<template>
+	<UCard :ui="ui">
+		<template #header>
+			<template v-if="loading">
+				<UProgress animation="carousel" />
+			</template>
+			<div class="flex flex-row">
+				<div v-if="prependIcon" class="mr-3 pt-3">
+					<Icon :name="prependIcon" :size="25" />
+				</div>
+				<div class="text-left">
+					<h4>{{ title }}</h4>
+					<p class="text-slate-400">{{ subtitle }}</p>
+				</div>
+				<div v-if="appendIcon" class="ml-3 pt-3">
+					<Icon :name="appendIcon" :size="25" />
+				</div>
+			</div>
+		</template>
+		<template v-if="$slots.body || text">
+			<div v-if="$slots.body">
+				<slot name="body" />
+			</div>
+			<div v-else-if="text">
+				{{ text }}
+			</div>
+		</template>
+		<template #footer v-if="$slots.actions">
+			<slot name="actions" />
+		</template>
+	</UCard>
+</template>
\ No newline at end of file
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 8941a27..4c36c44 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -14,11 +14,9 @@ export default defineNuxtConfig({
 	],
 	alias: {
 		server: "./server",
-		"#components": "./.nuxt/components.d.ts",
-		"#imports": "./.nuxt/imports.d.ts",
 		composables: "./composables",
+		"#components": "./.nuxt/components.d.ts",
 		"~~": "./assets",
-		"~/plugins": "./plugins",
-		"#ui/types": "./node_modules/@nuxt/ui/dist/runtime/types/index.d.ts"
+		"~/plugins": "./plugins"
 	}
 });
diff --git a/frontend/pages/about/index.vue b/frontend/pages/about/index.vue
index 4c361d0..a1e829a 100644
--- a/frontend/pages/about/index.vue
+++ b/frontend/pages/about/index.vue
@@ -79,6 +79,21 @@ useHead({
 		</ul>
 		<hr class="border-gray-700" />
 		<page-header description="About Me" />
+		<div class="flex justify-center mt-5">
+			<v-card
+				title="About me"
+				subtitle="About me"
+				prepend-icon="i-heroicons-rocket-launch-solid"
+				append-icon="i-devicon-githubcodespaces"
+			>
+				<template #body>
+					<p class="text-blue-500">Name: Jaipal</p>
+				</template>
+				<template #actions>
+					<UButton>Click</UButton>
+				</template>
+			</v-card>
+		</div>
 		<div class="flex justify-center mt-5">
 			<UCard class="w-1/4">
 				<template #header>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index a124028..0822f85 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -111,6 +111,10 @@ onMounted(async function () {
 								padding: { sm: 'p-3' }
 							}"
 						>
+							<Icon
+								:name="useNuxtApp().$icons(item.langName)"
+								:size="20"
+							/>
 							<span class="truncate">
 								{{
 									useNuxtApp().$langNamesPrint(item.langName)
diff --git a/frontend/plugins/langNames.ts b/frontend/plugins/langNames.ts
index 5a7e0cc..2272a2b 100644
--- a/frontend/plugins/langNames.ts
+++ b/frontend/plugins/langNames.ts
@@ -13,6 +13,71 @@ export const langNamesPrint = (lang: string) => {
 		? langs[lang]
 		: lang.charAt(0).toUpperCase() + lang.slice(1);
 };
+export const icons = (lang: string) => {
+	let langs: Record<string, string> = {
+		actionscript: "vscode-icons:file-type-actionscript",
+		ada: "vscode-icons:file-type-ada",
+		armasm: "vscode-icons:file-type-assembly",
+		asciidoc: "vscode-icons:file-type-asciidoc",
+		bash: "vscode-icons:file-type-shell",
+		batch: "vscode-icons:file-type-bat",
+		c: "vscode-icons-file-type-c3",
+		cmake: "vscode-icons:file-type-cmake",
+		clojure: "vscode-icons:file-type-clojure",
+		cpp: "vscode-icons-file-type-cpp",
+		csharp: "vscode-icons-file-type-csharp",
+		css: "vscode-icons-file-type-css",
+		dart: "vscode-icons:file-type-dartlang",
+		django: "vscode-icons:file-type-django",
+		docker: "vscode-icons:file-type-docker",
+		elixir: "vscode-icons:file-type-elixir",
+		elm: "vscode-icons:file-type-elm",
+		erlang: "vscode-icons:file-type-erlang",
+		fortran: "vscode-icons:file-type-fortran",
+		go: "vscode-icons:file-type-go",
+		gradle: "vscode-icons:file-type-gradle",
+		graphql: "vscode-icons-file-type-graphql",
+		groovy: "vscode-icons:file-type-groovy",
+		haml: "vscode-icons:file-type-haml",
+		handlebars: "vscode-icons:file-type-handlebars",
+		html: "vscode-icons-file-type-html",
+		http: "vscode-icons-file-type-http",
+		java: "vscode-icons:file-type-jar",
+		javascript: "vscode-icons-file-type-js-official",
+		json: "vscode-icons-file-type-json",
+		julia: "vscode-icons:file-type-julia",
+		kotlin: "vscode-icons:file-type-kotlin",
+		less: "vscode-icons:file-type-less",
+		lisp: "vscode-icons:file-type-lisp",
+		lua: "vscode-icons:file-type-lua",
+		markdown: "vscode-icons:file-type-markdown",
+		makefile: "vscode-icons:file-type-gnu",
+		nix: "vscode-icons:file-type-nix",
+		perl: "vscode-icons:file-type-perl",
+		php: "vscode-icons-file-type-php",
+		python: "vscode-icons-file-type-python",
+		r: "vscode-icons:file-type-r",
+		ruby: "vscode-icons-file-type-ruby",
+		rust: "vscode-icons-file-type-rust",
+		scala: "vscode-icons:file-type-scala",
+		scss: "vscode-icons-file-type-scss",
+		sql: "vscode-icons:file-type-sql",
+		stylus: "vscode-icons:file-type-stylus",
+		swift: "vscode-icons:file-type-swift",
+		toml: "vscode-icons:file-type-toml",
+		typescript: "vscode-icons-file-type-typescript-official",
+		vim: "vscode-icons:file-type-vim",
+		xquery: "vscode-icons:file-type-xquery",
+		yaml: "vscode-icons:file-type-yaml"
+	};
+	return (
+		"i-" +
+		(langs[lang]
+			? langs[lang].replace(":", "-")
+			: "vscode-icons-default-file")
+	);
+};
 export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.provide("langNamesPrint", langNamesPrint);
+	nuxtApp.provide("icons", icons);
 });
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index e5b0c50..01a4005 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -8,7 +8,7 @@
 			"#imports": ["./.nuxt/imports.d.ts"],
 			"#components": ["./.nuxt/components.d.ts"],
 			"#app/nuxt": ["./node_modules/nuxt/dist/app/index.d.ts"],
-			"~/plugins": ["./plugins"]
+			"~/plugins/": ["./plugins/"]
 		},
 		"lib": ["DOM", "ESNext"]
 	}