feat(platform): Add new design for slug (#675)

apps/platform/src/components/common/slug.tsx

@@ -0,0 +1,32 @@
+// eslint-disable-next-line camelcase -- this is a font import
+import { Roboto_Mono } from 'next/font/google'
+import { toast } from 'sonner'
+
+const roboto = Roboto_Mono({ weight: ['400'], subsets: ['latin'] })
+
+interface SlugProps {
+  text: string
+}
+
+export default function Slug({ text }: SlugProps): React.JSX.Element {
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(text)
+    toast.success('Copied to clipboard!', {
+      description: (
+        <p className="text-xs text-green-300">
+          The slug got copied to your clipboard.
+        </p>
+      )
+    })
+  }
+
+  return (
+    <button
+      className={`${roboto.className} rounded-lg bg-white/[10%] px-3 py-2 font-mono text-sm text-white/50`}
+      onClick={copyToClipboard}
+      type="button"
+    >
+      {text}
+    </button>
+  )
+}

apps/platform/src/components/dashboard/environment/environmentCard/index.tsx

@@ -15,6 +15,7 @@ import {
   editEnvironmentOpenAtom,
   selectedEnvironmentAtom
 } from '@/store'
+import Slug from '@/components/common/slug'
 
 interface EnvironmentCardProps {
   environment: GetAllEnvironmentsOfProjectResponse['items'][number]
@@ -48,7 +49,7 @@ export default function EnvironmentCard({
           <div className="flex flex-col gap-y-2 px-6 py-4">
             <div className="flex w-full flex-row items-center justify-between">
               <div className="text-2xl">{environment.name}</div>
-              <div className="text-sm text-white/50">{environment.slug}</div>
+              <Slug text={environment.slug} />
             </div>
             {environment.description ? (
               <div className="text-sm font-semibold text-white/50">