🎨 Prepare new copy code content + update <Loading /> component (a…

…dd size property)

website/app/components/card.tsx

@@ -1,19 +1,12 @@
 import type { iIcons } from "@/data/svgs";
-import { clipboard, lower } from "@/utils";
+import { clipboard } from "@/utils";
 
 import { toast } from "sonner";
-import { Github, Reactjs } from "@react-symbols/icons";
 
-import { Button, buttonVariants } from "@/ui/button";
-import { ArrowUpRightIcon, CodeIcon, CopyIcon } from "@/ui/icons/feather";
-import ExternalLink from "./externalLink";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/ui/tooltip";
-import { globals } from "@/globals";
+import { Button } from "@/ui/button";
+import { CopyIcon } from "@/ui/icons/feather";
+
+import GetCode from "./getCode";
 
 interface iCard extends iIcons {
   isFolder: boolean;
@@ -35,57 +28,19 @@ const Card = (props: iCard) => {
       <props.icon width={props.iconSize} height={props.iconSize} />
       <p className="text-sm tracking-tight text-white">{props.name}</p>
       <div className="flex items-center space-x-1">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleCopy}
-                title="Copy React Component"
-              >
-                <CopyIcon width={17} height={17} strokeWidth={1.5} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent
-              side="bottom"
-              className="flex items-center space-x-2"
-            >
-              <Reactjs width={20} height={20} />
-              <p>Copy React Component</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger>
-              <ExternalLink
-                title="Check Source Code"
-                href={
-                  props.isFolder
-                    ? `${globals.githubSrcRepository}library/folders/${lower(
-                        props.name,
-                      )}.tsx`
-                    : `${globals.githubSrcRepository}library/${lower(
-                        props.name,
-                      )}.tsx`
-                }
-                className={buttonVariants({
-                  variant: "ghost",
-                  size: "icon",
-                })}
-              >
-                <CodeIcon width={17} height={17} strokeWidth={1.5} />
-              </ExternalLink>
-            </TooltipTrigger>
-            <TooltipContent
-              side="bottom"
-              className="flex items-center space-x-2"
-            >
-              <Github width={20} height={20} className="fill-current" />
-              <p>Check Source Code</p>
-              <ArrowUpRightIcon width={12} height={12} strokeWidth={1.5} />
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleCopy}
+          title="Copy to clipboard"
+        >
+          <CopyIcon width={17} height={17} strokeWidth={1.5} />
+        </Button>
+        <GetCode
+          reactComponent={props.icon}
+          componentName={props.name}
+          isFolder={props.isFolder}
+        />
       </div>
     </div>
   );

website/app/components/getCode/index.tsx

@@ -0,0 +1,133 @@
+import { type FC, useState } from "react";
+
+import { Github } from "@react-symbols/icons";
+import { toast } from "sonner";
+import axios from "axios";
+import { highlight } from "sugar-high";
+
+import { clipboard, lower } from "@/utils";
+import { globals } from "@/globals";
+
+import { Button, buttonVariants } from "@/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/ui/dialog";
+import { ArrowUpRightIcon, CodeIcon } from "@/ui/icons/feather";
+import ExternalLink from "@/components/externalLink";
+import Loading from "@/components/loading";
+
+interface iGetCode {
+  componentName: string;
+  isFolder: boolean;
+  reactComponent: FC<React.SVGProps<SVGSVGElement>>;
+}
+
+const GetCode = (props: iGetCode) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [fileContent, setFileContent] = useState<string>("");
+
+  // ⚙️ Github Urls:
+  const ghUrl = props.isFolder
+    ? `${globals.githubSrcRepository}library/folders/${lower(
+        props.componentName,
+      )}.tsx`
+    : `${globals.githubSrcRepository}library/${lower(props.componentName)}.tsx`;
+  const ghRawUrl = props.isFolder
+    ? `${globals.githubRawUrl}library/folders/${lower(props.componentName)}.tsx`
+    : `${globals.githubRawUrl}library/${lower(props.componentName)}.tsx`;
+
+  const handleGetCode = async () => {
+    setOpen(true);
+    setLoading(true);
+    try {
+      const response = await axios.get(ghRawUrl);
+      setFileContent(response.data);
+    } catch (error) {
+      toast.error("Error fetching file", {
+        description: "Unable to obtain component data.",
+      });
+      console.error(
+        "⚠️ React-Symbols Website - Error fetching the Github Raw URL. Please create a Github Issue.",
+        error,
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopyContent = async (code: string, description: string) => {
+    await clipboard(code);
+    toast.success("Copied to clipboard", {
+      description: description,
+      icon: <props.reactComponent width={24} height={24} />,
+    });
+  };
+
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => handleGetCode()}
+        title="Get React Component"
+      >
+        <CodeIcon width={17} height={17} strokeWidth={1.5} />
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center space-x-2">
+              <props.reactComponent width={24} height={24} />
+              <span>{props.componentName}</span>
+            </DialogTitle>
+          </DialogHeader>
+          {isLoading ? (
+            <Loading
+              size={40}
+              className="my-4 flex items-center justify-center"
+            />
+          ) : fileContent ? (
+            <div className="max-h-80 overflow-scroll overflow-y-auto rounded-lg border border-dashed border-zinc-700 p-3 font-mono text-sm">
+              <pre
+                className="select-all"
+                dangerouslySetInnerHTML={{ __html: highlight(fileContent) }}
+              />
+            </div>
+          ) : (
+            <p>Error</p>
+          )}
+          <DialogFooter>
+            <Button
+              onClick={() =>
+                handleCopyContent(
+                  `<${props.componentName} />`,
+                  `<${props.componentName} />`,
+                )
+              }
+            >
+              Copy React Component
+            </Button>
+            <ExternalLink
+              title="Check Source Code"
+              href={ghUrl}
+              className={buttonVariants({
+                variant: "outline",
+              })}
+            >
+              <Github width={17} height={17} />
+              <span>View on Github</span>
+              <ArrowUpRightIcon width={13} height={13} />
+            </ExternalLink>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default GetCode;

website/app/components/loading.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/utils";
 
 interface iLoading {
+  size: number;
   className?: string;
 }
 
@@ -16,8 +17,8 @@ const Loading = (props: iLoading) => (
       className="animate-spin-slow"
       fill="none"
       viewBox="0 0 80 80"
-      width={55}
-      height={55}
+      width={props.size}
+      height={props.size}
     >
       <path
         fill="#2563EB"

website/app/routes/_index.tsx

@@ -18,7 +18,9 @@ export async function clientLoader() {
 }
 
 export function HydrateFallback() {
-  return <Loading className="my-10 flex items-center justify-center" />;
+  return (
+    <Loading size={55} className="my-10 flex items-center justify-center" />
+  );
 }
 
 export default function Index() {

website/app/routes/folders._index.tsx

@@ -18,7 +18,7 @@ export async function clientLoader() {
 }
 
 export function HydrateFallback() {
-  return <Loading className="my-10 flex items-center justify-center" />;
+  return <Loading size={55} className="my-10 flex items-center justify-center" />;
 }
 
 export default function Folders() {

website/app/styles/globals.css

@@ -5,6 +5,24 @@
 @layer base {
   :root {
     --radius: 0.5rem;
+
+    /* --sh-class: #7aa2f7;
+  --sh-sign: #89ddff;
+  --sh-string: #9ece6a;
+  --sh-keyword: #bb9af7;
+  --sh-comment: #565f89;
+  --sh-jsxliterals: #7aa2f7;
+  --sh-property: #73daca;
+  --sh-entity: #e0af68; */
+
+    --sh-class: #3b70e2;
+    --sh-sign: #21cee8;
+    --sh-string: #21cee8;
+    --sh-keyword: #c084fc;
+    --sh-comment: #565f89;
+    --sh-jsxliterals: #3b70e2;
+    --sh-property: #21cee8;
+    --sh-entity: #c084fc;
   }
 }