➕ Add: Gradient Border snippet

Author: manuarora700

data/snippets/gradient-border.mdx

@@ -0,0 +1,63 @@
+---
+title: "Gradient Border"
+description: "Add gradient to border"
+logo: "react.png"
+---
+
+```js
+import React from "react";
+// add classNames conditionally
+import cx from "clsx";
+
+const colors = [
+  "from-yellow-400 via-red-500 to-pink-500",
+  "from-purple-400 via-pink-500 to-red-500",
+  "from-yellow-100 via-yellow-300 to-yellow-500",
+  "from-green-400 to-blue-500",
+  "from-green-500 to-green-700",
+  "from-gray-500 via-gray-100 to-gray-500",
+];
+
+export const GradientBorder = () => {
+  const [colorIndex, setColorIndex] = React.useState(0);
+
+  const gradientColor = colors[colorIndex];
+
+  return (
+    <div>
+      <div
+        className={cx(
+          "flex justify-center w-56 p-1 rounded-md h-14 bg-gradient-to-r ",
+          gradientColor
+        )}
+        role="button"
+      >
+        <div className="flex items-center justify-center flex-grow text-white bg-black rounded">
+          <p>Gradient Border</p>
+        </div>
+      </div>
+      <div className="flex mt-10 space-x-4 rounded">
+        {colors.map((color, index) => {
+          return (
+            <div
+              key={index}
+              className={cx(
+                "h-6 w-6 rounded cursor-pointer transform ring-1 ring-offset-2 ring-white ring-offset-black bg-gradient-to-r ",
+                color,
+                {
+                  "ring-opacity-100": colorIndex === index,
+                  "ring-opacity-0 hover:ring-opacity-50": colorIndex !== index,
+                }
+              )}
+              onClick={() => setColorIndex(index)}
+            ></div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+```
+
+[Live Demo](http://manuarora.in/demos/demo/borderGradient)
+[Source Code](https://github.com/manuarora700/portfolio-website/tree/master/pages/demos/demo/borderGradient)

pages/demos/demo/borderGradient/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import cx from "clsx";
+
+const colors = [
+  "from-yellow-400 via-red-500 to-pink-500",
+  "from-purple-400 via-pink-500 to-red-500",
+  "from-yellow-100 via-yellow-300 to-yellow-500",
+  "from-green-400 to-blue-500",
+  "from-green-500 to-green-700",
+  "from-gray-500 via-gray-100 to-gray-500",
+];
+
+export default function GradientBorder() {
+  const [colorIndex, setColorIndex] = React.useState(0);
+
+  const gradientColor = colors[colorIndex];
+
+  return (
+    <div className="flex flex-col justify-center items-center bg-black h-screen transition duration-500">
+      <div
+        className={cx(
+          "flex justify-center w-56 p-1 rounded-md h-14 bg-gradient-to-r ",
+          gradientColor
+        )}
+        role="button"
+      >
+        <div className="flex items-center justify-center flex-grow text-white bg-black rounded">
+          <p>Gradient Border</p>
+        </div>
+      </div>
+      <div className="flex mt-10 space-x-4 rounded">
+        {colors.map((color, index) => {
+          return (
+            <div
+              key={index}
+              className={cx(
+                "h-6 w-6 rounded cursor-pointer transform ring-1 ring-offset-2 ring-white ring-offset-black bg-gradient-to-r transition duration-500",
+                color,
+                {
+                  "ring-opacity-100": colorIndex === index,
+                  "ring-opacity-0 hover:ring-opacity-50": colorIndex !== index,
+                }
+              )}
+              onClick={() => setColorIndex(index)}
+            ></div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

pages/demos/index.js

@@ -47,6 +47,11 @@ export default function Demos() {
             link="demos/demo/toast"
             description="A reusable react toast notification"
           />
+          <DemosCard
+            title="Border Gradient"
+            link="demos/demo/borderGradient"
+            description="Add gradients to border"
+          />
         </div>
       </div>
     </Container>

public/sitemap.xml

@@ -36,6 +36,10 @@
     <loc>https://manuarora.in/blog/top-5-nextjs-resources</loc>
   </url>
 
+  <url>
+    <loc>https://manuarora.in/snippets/gradient-border</loc>
+  </url>
+
   <url>
     <loc>https://manuarora.in/snippets/gradient-text</loc>
   </url>