Merge pull request #808 from creativetimofficial/test

@material-tailwind/html - 2.2.3
creativetimofficial · Aug 16, 2024 · 83d6912 · 83d6912
2 parents 86db5ce + ab4afbb
commit 83d6912
Show file tree

Hide file tree

Showing 41 changed files with 4,304 additions and 5 deletions.
diff --git a/docs-content/html/input-number/index.ts b/docs-content/html/input-number/index.ts
@@ -0,0 +1,10 @@
+export * from "./input-number-with-select";
+export * from "./input-zip-code";
+export * from "./input-phone-number";
+export * from "./input-amount";
+export * from "./input-amount-with-icon";
+export * from "./input-counter-buttons";
+export * from "./input-currency";
+export * from "./input-credit-card";
+export * from "./input-otp";
+export * from "./input-currency-conversion";
diff --git a/docs-content/html/input-number/input-amount-with-icon.tsx b/docs-content/html/input-number/input-amount-with-icon.tsx
@@ -0,0 +1,43 @@
+export function InputAmountWithIcon() {
+  return (
+    <>
+      <div className="w-[250px] max-w-sm relative mt-4">
+        <label className="block mb-1 text-sm text-slate-800">
+          Add Members
+        </label>
+        <div className="relative">
+          <button
+            className="absolute h-8 w-8 right-10 top-1 my-auto px-2 flex items-center bg-slate-800 rounded hover:bg-slate-700"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFF" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+            </svg>
+          </button>
+
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="absolute w-5 h-5 top-2.5 left-2.5 text-slate-500">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+          </svg>
+
+          <input
+            type="number"
+            className="w-full pl-10 h-10 pr-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+            placeholder="5"
+            value="5"
+          />
+          <button
+            className="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-slate-800 rounded hover:bg-slate-700"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFF" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+          </button>
+        </div>
+        <p className="flex items-center mt-2 text-xs text-slate-500">
+          Use the + and - buttons to add or remove members.
+        </p>    
+      </div>
+    </>
+  );
+}
diff --git a/docs-content/html/input-number/input-amount.tsx b/docs-content/html/input-number/input-amount.tsx
@@ -0,0 +1,38 @@
+export function InputAmount() {
+  return (
+    <>
+      <div className="w-[250px] max-w-sm relative mt-4">
+        <label className="block mb-1 text-sm text-slate-800">
+          Select Amount
+        </label>
+        <div className="relative">
+          <button
+            className="absolute h-8 w-8 right-10 top-1 my-auto px-2 flex items-center bg-slate-800 rounded hover:bg-slate-700"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFF" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+            </svg>
+          </button>
+          <input
+            type="number"
+            className="w-full pl-3 h-10 pr-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+            placeholder="5"
+            value="5"
+          />
+          <button
+            className="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-slate-800 rounded hover:bg-slate-700"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFF" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+          </button>
+        </div>
+        <p className="flex items-center mt-2 text-xs text-slate-500">
+          Adjust the number using the + and - controls.
+        </p>    
+      </div>
+    </>
+  );
+}
diff --git a/docs-content/html/input-number/input-counter-buttons.tsx b/docs-content/html/input-number/input-counter-buttons.tsx
@@ -0,0 +1,38 @@
+export function InputCounterButtons() {
+  return (
+    <>
+      <div className="w-[250px] max-w-sm relative mt-4">
+        <label className="block mb-1 text-sm text-slate-800">
+          Number of Items
+        </label>
+        <div className="relative">
+          <button
+            className="absolute h-8 w-8 right-10 top-1 my-auto px-2 flex items-center bg-white rounded hover:bg-slate-200"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+            </svg>
+          </button>
+          <input
+            type="number"
+            className="w-full pl-4 h-10 pr-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+            placeholder="55"
+            value="55"
+          />
+          <button
+            className="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-white rounded hover:bg-slate-200"
+            type="button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-8 h-8">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+          </button>
+        </div>
+        <p className="flex items-center mt-2 text-xs text-slate-500">
+          Use the + and - buttons to adjust the quantity.
+        </p>    
+      </div>
+    </>
+  );
+}
diff --git a/docs-content/html/input-number/input-credit-card.tsx b/docs-content/html/input-number/input-credit-card.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+
+export function InputCreditCard() {
+  const formatCardNumber = (input: HTMLInputElement) => {
+    input.value = input.value.replace(/\D/g, '');
+    input.value = input.value.replace(/(.{4})/g, '$1 ').trim();
+  };
+
+  const handleCardNumberInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const input = event.currentTarget;
+    formatCardNumber(input);
+  };
+
+  const handleExpirationDateInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const input = event.currentTarget;
+    const value = input.value.replace(/\D/g, '');
+
+    if (value.length <= 2) {
+      input.value = value;
+    } else {
+      input.value = `${value.slice(0, 2)}/${value.slice(2, 4)}`;
+    }
+  };
+
+  const handleCvvInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const input = event.currentTarget;
+    input.value = input.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
+  };
+
+  return (
+    <div className="w-full max-w-sm min-w-[200px] mt-4">
+      <label className="block mb-1 text-sm text-slate-800">
+        Cardholder Name
+      </label>
+      <input
+        type="text"
+        className="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+        placeholder="e.g John Doe"
+      />
+
+      <label className="block mb-1 text-sm text-slate-800 mt-4">
+        Card Number
+      </label>
+      <input
+        type="text"
+        id="cardNumber"
+        className="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+        placeholder="1234 5678 9012 3456"
+        maxLength={19}
+        onInput={handleCardNumberInput}
+      />
+
+      <div className="flex">
+        <div className="w-full md:w-8/12 mr-4">
+          <label className="block mb-1 text-sm text-slate-800 mt-4">
+            Expiration Date
+          </label>
+          <input
+            type="text"
+            className="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+            placeholder="MM/YY"
+            maxLength={5}
+            pattern="\d{2}/\d{2}"
+            onInput={handleExpirationDateInput}
+          />
+        </div>
+        <div className="w-full md:w-4/12">
+          <label className="block mb-1 text-sm text-slate-800 mt-4">
+            CVV
+          </label>
+          <input
+            type="text"
+            className="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
+            placeholder="123"
+            maxLength={3}
+            pattern="\d{3}"
+            onInput={handleCvvInput}
+          />
+        </div>
+      </div>
+
+      <button className="w-full text-sm flex items-center justify-center bg-slate-800 rounded hover:bg-slate-700 text-white py-3 px-6 mt-4">
+        Purchase Now
+      </button>
+    </div>
+  );
+}