feat: add 'copy to edit' link (#10)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

.env

@@ -2,3 +2,4 @@ API_URL=http://localhost:4000/
 SCHEMA_API_URL='http://localhost:4000/docs/json?showHidden=true'
 
 NEXT_PUBLIC_USERCONTENT_SITE_URL='http://localhost:5173/'
+NEXT_PUBLIC_BEE_SITE_URL='http://localhost:3000/'

Dockerfile

@@ -27,6 +27,7 @@ COPY --from=deps ${APP_DIR}/node_modules ./node_modules
 COPY . .
 
 ARG NEXT_PUBLIC_USERCONTENT_SITE_URL
+ARG NEXT_PUBLIC_BEE_SITE_URL
 
 RUN corepack enable pnpm && pnpm run build;
 

src/app/artifacts/[artifactId]/page.tsx

@@ -35,11 +35,7 @@ export default async function ArtifactPage({ params, searchParams }: Props) {
 
   return (
     <>
-      <Header
-        heading={artifact.name}
-        tooltip={artifact.description}
-        icon={artifact.uiMetadata.icon}
-      />
+      <Header artifact={artifact} token={token} />
 
       <Main className="flex py-2 md:py-6">
         <Container className="px-2 md:px-6">

src/modules/artifacts/Header.tsx

@@ -1,39 +1,44 @@
-import { ArtifactSharedIcon } from '@/app/api/artifacts/types';
+import { ArtifactShared } from '@/app/api/artifacts/types';
 import { Button } from '@/components/ui/Button';
 import { Container } from '@/components/ui/Container';
 import { Tooltip } from '@/components/ui/Tooltip';
 import { DirectionFork, Information } from '@carbon/icons-react';
 import { ArtifactIcon } from './ArtifactIcon';
+import { BEE_SITE_URL } from '@/utils/constants';
 
 interface Props {
-  heading: string;
-  icon?: ArtifactSharedIcon;
-  tooltip?: string | null;
+  artifact: ArtifactShared;
+  token: string;
 }
 
-export function Header({ heading, icon, tooltip }: Props) {
+export function Header({ artifact, token }: Props) {
   return (
     <header className="sticky left-0 top-0 border-b border-b-subtle bg-background py-3 md:py-5">
       <Container>
         <div className="grid items-center justify-center gap-x-4 gap-y-2 md:grid-cols-[1fr,auto,1fr]">
           <div className="flex items-center gap-x-1 md:col-start-2">
-            {icon && <ArtifactIcon name={icon} />}
+            {artifact.uiMetadata.icon && (
+              <ArtifactIcon name={artifact.uiMetadata.icon} />
+            )}
 
             <h1 className="text-base font-semibold text-coolGray-100 dark:text-white">
-              {heading}
+              {artifact.name}
             </h1>
 
-            {tooltip && (
-              <Tooltip content={tooltip}>
+            {artifact.description && (
+              <Tooltip content={artifact.description}>
                 <Information />
               </Tooltip>
             )}
           </div>
 
-          {/* TODO: Should link to bee-ui */}
           <div className="justify-self-center whitespace-nowrap md:col-start-3 md:justify-self-end">
-            <Button kind="secondary" size="sm" Icon={DirectionFork}>
-              Copy to edit
+            <Button kind="secondary" size="sm" Icon={DirectionFork} asChild>
+              <a
+                href={`${BEE_SITE_URL}clone-app/${artifact.id}?token=${token}`}
+              >
+                Copy to edit
+              </a>
             </Button>
           </div>
         </div>

src/utils/constants.ts

@@ -2,3 +2,4 @@ export const API_URL = process.env.API_URL!;
 
 export const USERCONTENT_SITE_URL =
   process.env.NEXT_PUBLIC_USERCONTENT_SITE_URL!;
+export const BEE_SITE_URL = process.env.NEXT_PUBLIC_BEE_SITE_URL!;