feat: add k8s/docker logos

services/frontend/src/components/Projects/PreviewBlock.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { TrashIcon } from "@heroicons/react/outline";
+import K8sLogo from "../../components/global/k8s-logo";
+import DockerLogo from "../../components/global/docker-logo";
 import { truncateStr } from "../../utils";
 import { IProject } from "../../types";
 import ModalConfirmDelete from "../modals/ConfirmDelete";
@@ -60,6 +62,9 @@ const PreviewBlock = (props: IPreviewBlockProps) => {
           hover:bg-gray-200
         `}
       >
+        {project.project_type === 0 && <DockerLogo />}
+        {project.project_type === 1 && <K8sLogo />}
+
         <div className="flex-1 min-w-0">{truncateStr(project.name, 25)}</div>
 
         {isHovering && (

services/frontend/src/components/global/docker-logo.tsx

@@ -0,0 +1,28 @@
+const DockerLogo = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 655 561"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M648.387 313.093C646.381 310.859 596.043 256.776 534.111 260.547C534.267 258.245 534.34 255.943 534.34 253.656C534.34 194.219 483.73 148.213 481.569 146.276C472.731 138.349 459.282 138.349 450.444 146.276C448.277 148.213 397.668 194.219 397.668 253.656C397.668 262.453 398.762 271.359 400.97 280.328H24.3299C11.4444 280.328 0.996582 290.776 0.996582 303.661C0.996582 461.981 81.4659 560.328 210.997 560.328C328.565 560.328 449.717 484.812 495.077 387.381C510.483 393.772 525.842 396.996 540.994 396.996C600.467 396.996 646.447 346.376 648.385 344.225C656.317 335.361 656.317 321.96 648.385 313.095L648.387 313.093ZM129.333 420.328C110.036 420.328 94.3333 404.625 94.3333 385.328C94.3333 366.031 110.036 350.328 129.333 350.328C148.631 350.328 164.333 366.031 164.333 385.328C164.333 404.625 148.631 420.328 129.333 420.328Z"
+        fill="#066CA4"
+      />
+      <path d="M24.3333 187H94.3333V257H24.3333V187Z" fill="#066CA4" />
+      <path d="M117.667 187H187.667V257H117.667V187Z" fill="#066CA4" />
+      <path
+        d="M117.667 93.6666H187.667V163.667H117.667V93.6666Z"
+        fill="#066CA4"
+      />
+      <path d="M211 93.6666H281V163.667H211V93.6666Z" fill="#066CA4" />
+      <path d="M211 0.333313H281V70.3333H211V0.333313Z" fill="#066CA4" />
+      <path d="M211 187H281V257H211V187Z" fill="#066CA4" />
+      <path d="M304.333 187H374.333V257H304.333V187Z" fill="#066CA4" />
+    </svg>
+  );
+};
+
+export default DockerLogo;

services/frontend/src/components/global/k8s-logo.tsx

@@ -0,0 +1,23 @@
+const K8sLogo = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="24"
+      height="24"
+    >
+      <path
+        d="M15.9.476a2.14 2.14 0 0 0-.823.218L3.932 6.01c-.582.277-1.005.804-1.15 1.432L.054 19.373c-.13.56-.025 1.147.3 1.627q.057.087.12.168l7.7 9.574c.407.5 1.018.787 1.662.784h12.35c.646.001 1.258-.3 1.664-.793l7.696-9.576c.404-.5.555-1.16.4-1.786L29.2 7.43c-.145-.628-.57-1.155-1.15-1.432L16.923.695A2.14 2.14 0 0 0 15.89.476z"
+        fill="#326ce5"
+      />
+      <path
+        d="M16.002 4.542c-.384.027-.675.356-.655.74v.188c.018.213.05.424.092.633a6.22 6.22 0 0 1 .066 1.21c-.038.133-.114.253-.218.345l-.015.282c-.405.034-.807.096-1.203.186-1.666.376-3.183 1.24-4.354 2.485l-.24-.17c-.132.04-.274.025-.395-.04a6.22 6.22 0 0 1-.897-.81 5.55 5.55 0 0 0-.437-.465l-.148-.118c-.132-.106-.294-.167-.463-.175a.64.64 0 0 0-.531.236c-.226.317-.152.756.164.983l.138.11a5.55 5.55 0 0 0 .552.323c.354.197.688.428.998.7a.74.74 0 0 1 .133.384l.218.2c-1.177 1.766-1.66 3.905-1.358 6.006l-.28.08c-.073.116-.17.215-.286.288a6.22 6.22 0 0 1-1.194.197 5.57 5.57 0 0 0-.64.05l-.177.04h-.02a.67.67 0 0 0-.387 1.132.67.67 0 0 0 .684.165h.013l.18-.02c.203-.06.403-.134.598-.218.375-.15.764-.265 1.162-.34.138.008.27.055.382.135l.3-.05c.65 2.017 2.016 3.726 3.84 4.803l-.122.255c.056.117.077.247.06.376-.165.382-.367.748-.603 1.092a5.58 5.58 0 0 0-.358.533l-.085.18a.67.67 0 0 0 .65 1.001.67.67 0 0 0 .553-.432l.083-.17c.076-.2.14-.404.192-.61.177-.437.273-.906.515-1.196a.54.54 0 0 1 .286-.14l.15-.273a8.62 8.62 0 0 0 6.146.015l.133.255c.136.02.258.095.34.205.188.358.34.733.456 1.12a5.57 5.57 0 0 0 .194.611l.083.17a.67.67 0 0 0 1.187.131.67.67 0 0 0 .016-.701l-.087-.18a5.55 5.55 0 0 0-.358-.531c-.23-.332-.428-.686-.6-1.057a.52.52 0 0 1 .068-.4 2.29 2.29 0 0 1-.111-.269c1.82-1.085 3.18-2.8 3.823-4.82l.284.05c.102-.093.236-.142.373-.138.397.076.786.2 1.162.34.195.09.395.166.598.23.048.013.118.024.172.037h.013a.67.67 0 0 0 .841-.851.67.67 0 0 0-.544-.446l-.194-.046a5.57 5.57 0 0 0-.64-.05c-.404-.026-.804-.092-1.194-.197-.12-.067-.22-.167-.288-.288l-.27-.08a8.65 8.65 0 0 0-1.386-5.993l.236-.218c-.01-.137.035-.273.124-.378.307-.264.64-.497.99-.696a5.57 5.57 0 0 0 .552-.323l.146-.118a.67.67 0 0 0-.133-1.202.67.67 0 0 0-.696.161l-.148.118a5.57 5.57 0 0 0-.437.465c-.264.302-.556.577-.873.823a.74.74 0 0 1-.404.044l-.253.18c-1.46-1.53-3.427-2.48-5.535-2.67 0-.1-.013-.25-.015-.297-.113-.078-.192-.197-.218-.332a6.23 6.23 0 0 1 .076-1.207c.043-.21.073-.42.092-.633v-.2c.02-.384-.27-.713-.655-.74zm-.834 5.166l-.2 3.493h-.015c-.01.216-.137.4-.332.504s-.426.073-.6-.054l-2.865-2.03a6.86 6.86 0 0 1 3.303-1.799c.234-.05.47-.088.707-.114zm1.668 0c1.505.187 2.906.863 3.99 1.924l-2.838 2.017c-.175.14-.415.168-.618.072s-.333-.3-.336-.524zm-6.72 3.227l2.62 2.338v.015c.163.142.234.363.186.574s-.21.378-.417.435v.01l-3.362.967a6.86 6.86 0 0 1 .974-4.34zm11.753 0c.796 1.295 1.148 2.814 1.002 4.327l-3.367-.97v-.013c-.21-.057-.37-.224-.417-.435s.023-.43.186-.574l2.6-2.327zm-6.404 2.52h1.072l.655.832-.238 1.04-.963.463-.965-.463-.227-1.04zm3.434 2.838c.045-.005.1-.005.135 0l3.467.585c-.5 1.44-1.487 2.67-2.775 3.493l-1.34-3.244a.59.59 0 0 1 .509-.819zm-5.823.015c.196.003.377.104.484.268s.124.37.047.55v.013l-1.332 3.218C11 21.54 10.032 20.325 9.517 18.9l3.437-.583c.038-.004.077-.004.116 0zm2.904 1.4a.59.59 0 0 1 .537.308h.013l1.694 3.057-.677.2c-1.246.285-2.547.218-3.758-.194l1.7-3.057c.103-.18.293-.29.5-.295z"
+        fill="#fff"
+        stroke="#fff"
+        strokeWidth=".055"
+      />
+    </svg>
+  );
+};
+
+export default K8sLogo;