Merge pull request #46 from dheereshagrwal/dropbox

add dropbox icon

README.md

@@ -20,7 +20,7 @@ To use the Colored Icons Library, simply add the following CDN link to your HTML
 ```
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@1.7.9/src/app/ci.min.css"
+  href="https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@1.8.0/src/app/ci.min.css"
 />
 ```
 

src/app/about/page.tsx

@@ -2,9 +2,14 @@
 import { Navbar } from "@/components/Navbar";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa6";
-import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
 import { icons } from "@/constants";
 import useCopy from "@/hooks/useCopy";
+import CdnInclude from "../../components/About/CdnInclude";
+
+const CI_CSS_URL_VERSION =
+  "https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@1.8.0/src/app/ci.min.css";
+const CI_CSS_URL_LATEST =
+  "https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons/src/app/ci.min.css";
 
 // Updated showcase icons with both tech and social icons
 const showcaseIcons = {
@@ -153,29 +158,15 @@ export default function About() {
             <h2 className="text-2xl font-semibold text-gray-900">
               Quick Start
             </h2>
-            <div className="prose prose-gray max-w-full">
-              <p className="text-gray-600 mt-4">Include via CDN:</p>
-              <div className="mt-4 relative">
-                <pre className="bg-gray-800/95 text-white p-4 pr-14 rounded-lg whitespace-pre-wrap word-break-all">
-                  <code>{`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@1.7.9/src/app/ci.min.css" />`}</code>
-                </pre>
-                <button
-                  onClick={() =>
-                    handleCopy(
-                      '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dheereshagrwal/colored-icons@1.7.9/src/app/ci.min.css" />'
-                    )
-                  }
-                  className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-white/10 transition-colors"
-                  title="Copy to clipboard"
-                >
-                  {copied ? (
-                    <HiOutlineClipboardCheck className="w-5 h-5 text-green-400" />
-                  ) : (
-                    <HiOutlineClipboard className="w-5 h-5 text-gray-400" />
-                  )}
-                </button>
-              </div>
-            </div>
+
+            <CdnInclude
+              text="Include via CDN (another version):"
+              url={CI_CSS_URL_VERSION}
+            />
+            <CdnInclude
+              text="Include via CDN (latest):"
+              url={CI_CSS_URL_LATEST}
+            />
           </section>
 
           {/* Community */}

src/app/ci.css

@@ -2520,7 +2520,7 @@
 .ci-letterboxd-vertical,
 .ci-letterboxd-stacked-dark,
 .ci-letterboxd-vertical-dark {
-  content: url("../../public/logos/letterboxd/letterboxd-vertical-dark.svg");
+  content: url("../../public/logos/letterboxd/letterboxd-vertical.svg");
 }
 
 .ci-letterboxd-horizontal-light,
@@ -2532,14 +2532,32 @@
 .ci-letterboxd-horizontal-dark,
 .ci-letterboxd-inline,
 .ci-letterboxd-inline-dark {
-  content: url("../../public/logos/letterboxd/letterboxd-horizontal-dark.svg");
+  content: url("../../public/logos/letterboxd/letterboxd-horizontal.svg");
 }
 
 .ci-codeforces,
 .ci-cf {
   content: url("../../public/logos/codeforces/codeforces.svg");
 }
 
+.ci-dropbox,
+.ci-dropbox-dark,
+.ci-dropbox-light {
+  content: url("../../public/logos/dropbox/dropbox.svg");
+}
+
+.ci-dropbox-horizontal,
+.ci-dropbox-inline,
+.ci-dropbox-horizontal-dark,
+.ci-dropbox-inline-dark {
+  content: url("../../public/logos/dropbox/dropbox-horizontal.svg");
+}
+
+.ci-dropbox-horizontal-light,
+.ci-dropbox-inline-light {
+  content: url("../../public/logos/dropbox/dropbox-horizontal-light.svg");
+}
+
 .ci-2xs {
   width: 0.625rem;
   height: 0.625rem;

src/components/About/CdnInclude.tsx

@@ -0,0 +1,40 @@
+import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
+import { useState } from "react";
+interface CdnIncludeProps {
+  text: string;
+  url: string;
+}
+
+const CdnInclude: React.FC<CdnIncludeProps> = ({ text, url }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (content: string) => {
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="prose prose-gray max-w-full">
+      <p className="text-gray-600 mt-4">{text}</p>
+      <div className="mt-4 relative">
+        <pre className="bg-gray-800/95 text-white p-4 pr-14 rounded-lg whitespace-pre-wrap word-break-all">
+          <code>{`<link rel="stylesheet" href="${url}" />`}</code>
+        </pre>
+        <button
+          onClick={() => handleCopy(`<link rel="stylesheet" href="${url}" />`)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-white/10 transition-colors"
+          title="Copy to clipboard"
+        >
+          {copied ? (
+            <HiOutlineClipboardCheck className="w-5 h-5 text-green-400" />
+          ) : (
+            <HiOutlineClipboard className="w-5 h-5 text-gray-400" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CdnInclude;

src/constants/icons.ts

@@ -1197,5 +1197,11 @@ const icons = [
     classes: ["codeforces"],
     url: "codeforces.com",
   },
+  {
+    name: "Dropbox",
+    category: "technology",
+    classes: ["dropbox", "dropbox-horizontal", "dropbox-horizontal-light"],
+    url: "dropbox.com",
+  },
 ];
 export default icons;