Promote github page after export (#20)

.gitignore

@@ -13,6 +13,7 @@ dev-dist
 dist-ssr
 *.local
 *.tsbuildinfo
+.env
 
 # Editor directories and files
 !.vscode/extensions.json

src/components/common/star-on-github-button.tsx

@@ -0,0 +1,10 @@
+import { Github } from "lucide-react"
+import { Button } from "../ui"
+import { config } from "@/lib/config";
+
+export const StarOnGitHubButton = () => {
+  const openGitHub = () => {
+    window.open(config.githubURL, "_blank", "noopener,noreferrer");
+  };
+  return <Button size={"lg"} variant={"ghost"} onClick={openGitHub}><Github /> Star on GitHub</Button>
+}

src/components/export/task/caption-export-summary.tsx

@@ -1,7 +1,8 @@
 import { useImages } from "@/hooks/use-images";
-import { Check, FileText, Images } from "lucide-react";
+import { FileText, Images } from "lucide-react";
 import { Separator } from "../../ui";
 import { useExportProgress } from "../export-progress-provider";
+import { ExportSuccessfulSummaryMessage } from "./export-successful-summary-message";
 
 export const CaptionExportSummary = () => {
   const { allImages } = useImages();
@@ -37,13 +38,7 @@ export const CaptionExportSummary = () => {
           You labeled {items.length} out of {allImages.length} images
         </div>
       </div>
-      {percentage === 100 && (<>
-        <Separator />
-        <div className="flex gap-4 items-center">
-          <Check className="h-8 w-8" />
-          Export successful
-        </div>
-      </>)}
-    </div>
+      {percentage === 100 && <ExportSuccessfulSummaryMessage />}
+    </div >
   );
 };

src/components/export/task/export-successful-summary-message.tsx

@@ -0,0 +1,30 @@
+import { StarOnGitHubButton } from "@/components/common/star-on-github-button"
+import { Separator } from "@/components/ui"
+import { config } from "@/lib/config"
+import { productName } from "@/lib/constants"
+import { Check } from "lucide-react"
+
+export const ExportSuccessfulSummaryMessage = () => {
+
+  return (
+    <>
+      <Separator />
+      <div className="flex gap-4 items-center">
+        <Check className="h-8 w-8" />
+        Export successful
+      </div>
+      {config.demoMode && (
+        <>
+          <Separator />
+          <div className="flex flex-row gap-2 items-center">
+            <div>
+              Do you like {productName}?
+              Please consider starring the project on GitHub!
+            </div>
+            <StarOnGitHubButton />
+          </div>
+        </>
+      )}
+    </>
+  )
+}

src/components/export/task/sort-export-summary.tsx

@@ -1,6 +1,5 @@
 import { useImages } from "@/hooks/use-images";
-import { Check, FolderInput } from "lucide-react";
-import { Separator } from "../../ui";
+import { FolderInput } from "lucide-react";
 import { useExportProgress } from "../export-progress-provider";
 import { ExportItem } from "../types";
 import { unique } from "@/lib/utils";
@@ -13,6 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { ExportSuccessfulSummaryMessage } from "./export-successful-summary-message";
 
 
 const getDirectoriesCreated = (items: ExportItem[]): Record<string, number> => {
@@ -78,13 +78,7 @@ export const SortExportSummary = () => {
           ))}
         </TableBody>
       </Table>
-      {percentage === 100 && (<>
-        <Separator />
-        <div className="flex gap-4 items-center">
-          <Check className="h-8 w-8" />
-          Export successful
-        </div>
-      </>)}
+      {percentage === 100 && <ExportSuccessfulSummaryMessage />}
     </div>
   );
 };

src/pages/setup/footer.tsx

@@ -1,18 +1,11 @@
-import { Button } from "@/components/ui"
+import { StarOnGitHubButton } from "@/components/common/star-on-github-button"
 import { config } from "@/lib/config"
-import { Github } from "lucide-react"
 
 export const Footer = () => {
-  const openGitHub = () => {
-    window.open(config.githubURL, "_blank", "noopener,noreferrer");
-  };
-
   return (
     <div className="absolute left-0 bottom-8 w-full">
       <div className="flex flex-col gap-2 justify-center items-center align-middle">
-        {config.demoMode && (
-          <Button size={"lg"} variant={"ghost"} onClick={openGitHub}><Github /> Star on GitHub</Button>
-        )}
+        {config.demoMode && <StarOnGitHubButton />}
         <div className="flex flex-row gap-4 justify-center text-muted-foreground text-xs">
           {config.imprintUrl && (<a href={config.imprintUrl} target="_blank" className="hover:underline">Imprint</a>)}
           {config.privacyUrl && (<a href={config.privacyUrl} target="_blank" className="hover:underline">Privacy Policy</a>)}