feature: Added dynamic input fields

components/drip/inputs/Input.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+/**
+ *
+ * @param {object} props
+ * @param {string} props.type - the type of the input
+ * @param {string} props.className - custom tailwindCSS styles for the input
+ * @returns {JSX.Element}
+ */
+const Input = forwardRef(({ type, className, ...rest }, ref) => {
+  return (
+    <input
+      className={`"text-sm px-2 py-2 w-full text-gray-700 border-gray-300 border-2 focus:border-gray-800 focus:outline-none focus:ring-0" ${
+        className ?? ""
+      }`}
+      type={type ?? "text"}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+export default Input;

components/other/ComponentListing.js

@@ -1,69 +1,74 @@
-import Link from 'next/link'
-import { useState, useEffect } from 'react';
+import Link from "next/link";
+import { useState, useEffect } from "react";
 import { basicNavbars } from "../drip/navbar/basicNavbars";
 
-const ComponentListing = ({featured=0}) => {
-    const [list, setList] = useState(undefined)
-    const components =[
-        {
-            'name':'buttons',
-            'count':3,
-            'icon': 'ri-toggle-line',
-            'featured':true
-        },
-        {
-            'name':'cards',
-            'count':4,
-            'icon':'ri-refund-line',
-            'featured':true
-        },
-        {
-            'name':'headers',
+const ComponentListing = ({ featured = 0 }) => {
+  const [list, setList] = useState(undefined);
+  const components = [
+    {
+      name: "buttons",
+      count: 3,
+      icon: "ri-toggle-line",
+      featured: true,
+    },
+    {
+      name: "cards",
+      count: 4,
+      icon: "ri-refund-line",
+      featured: true,
+    },
+    {
+      name: "headers",
+      count: 2,
+      icon: "ri-layout-top-line",
+      featured: true,
+    },
+    {
+      name: "footers",
+      count: 1,
+      icon: "ri-layout-bottom-line",
+      featured: true,
+    },
+    {
+      name: "inputs",
+      count: 1,
+      icon: "ri-input-cursor-move",
+      featured: true,
+    },
+  ];
 
-            'count':2,
+  useEffect(() => {
+    if (featured != 0) {
+      setList([...components.slice(0, featured)]);
+    }
+  }, [featured]);
 
-            'icon': 'ri-layout-top-line',
-            'featured':true
-        },
-        {
-            'name':'footers',
-            'count':1,
-            'icon': 'ri-layout-bottom-line',
-            'featured':true
-        },
-
-    ]
+  return (
+    <div className="grid grid-cols-2 gap-4 my-1 md:grid-cols-4 xl:grid-cols-6">
+      {(list || components)?.map((component) => (
+        <Link
+          key={component.name}
+          href={`/docs/${component.count ? component.name : "#"}`}>
+          <a
+            className={`${
+              !component.count ? "opacity-60 pointer-events-none" : ""
+            } group component-listing-a `}>
+            <i className={`${component.icon} text-3xl`}></i>
+            {component.name}
+            <span className="text-sm">
+              {component.count > 1
+                ? `${component.count} Components`
+                : component.count
+                ? `${component.count} Component`
+                : "coming soon"}
+            </span>
 
-    useEffect(() => {
-       if(featured != 0){
-        setList([...components.slice(0,featured)])
-       }
-    },[featured]);
+            <i className="ri-external-link-line absolute right-3 top-2 text-[17px] group-hover:animate-spin"></i>
+          </a>
+        </Link>
+      ))}
+    </div>
+  );
+};
 
-
-    return ( 
-        <div className='grid grid-cols-2 gap-4 my-1 md:grid-cols-4 xl:grid-cols-6'>
-            {(list||components)?.map((component) =>(
-                <Link key={component.name} href={`/docs/${(component.count)?component.name :'#'}`}>
-                    <a  className={`${(!component.count)?'opacity-60 pointer-events-none' :''} group component-listing-a `}>
-                        <i className={`${component.icon} text-3xl`}></i>
-                        {component.name}
-                        <span className='text-sm'>
-                            {(component.count>1)?
-                                `${component.count} Components`:
-                                (component.count)?
-                                    `${component.count} Component`:
-                                    'coming soon'}
-                        </span>
-
-                        <i className="ri-external-link-line absolute right-3 top-2 text-[17px] group-hover:animate-spin"></i>
-                    </a>
-                </Link>
-            ))}
-
-
-          </div>
-     );
-}
-
 export default ComponentListing;

pages/docs/inputs.jsx

@@ -0,0 +1,54 @@
+import PageHeading from "../../components/other/PageHeadings";
+import Input from "../../components/drip/inputs/Input";
+import Meta from "../../components/layout/meta";
+import { useState, useRef, createRef } from "react";
+import copyToClipboard from "../../utils/function/copyToClipBoard";
+
+const inputs = () => {
+  const [copyStatus, setCopyStatus] = useState(false);
+  const ref = useRef(null);
+
+  return (
+    <section className="lg:px-12 px-3 ">
+      <Meta
+        title={"DripUI - Tailwind CSS Buttons"}
+        description={
+          "DripUI offers a wide range of responsive NavBars, including outlined navbar, animated hamburger menus, ...."
+        }
+        url={"/components/inputs"}
+      />
+      <PageHeading
+        title={"Input Components"}
+        alt={"input"}
+        description={
+          "Input fields are essential in web applications and websites for collecting user data, ranging from text and numbers to dates and selections. DripUI provides a versatile collection of responsive input elements, including text fields, checkboxes, and dropdowns, ensuring a seamless user experience across devices."
+        }
+      />
+
+      <section>
+        <h2 className="text-3xl font-semibold mb-10">Input Fields</h2>
+        <div className="p-4 rounded-lg shadow-inner shadow-drip-black/30 max-w-md flex items-center">
+          <div className="w-full">
+            <div className="flex gap-2 items-center mb-1">
+              <Input
+                placeholder="I'm a dynamic input field"
+                ref={ref}
+                className="w-full"
+              />
+              <i
+                className="ri-file-copy-line"
+                onClick={() => copyToClipboard(ref, setCopyStatus)}></i>
+            </div>
+            {copyStatus && (
+              <span className="relative flex gap-1 py-2 text-sm items-center mx-auto w-fit ">
+                Copied! <i className="ri-chat-smile-2-line animate-bounce"></i>{" "}
+              </span>
+            )}
+          </div>
+        </div>
+      </section>
+    </section>
+  );
+};
+
+export default inputs;