date pickerdate-picker

4 files changed, 42 insertions, 9 deletions

diff --git a/bun.lockb b/bun.lockb
index d38a703b..cde842d4 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 2e686149..72a3452b 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@sveltejs/adapter-node": "^2.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@zerodevx/svelte-toast": "^0.7.2",
     "autoprefixer": "^10.4.13",
@@ -28,6 +29,7 @@
     "qrcode-base64": "^1.0.1",
     "rollup": "^2.79.1",
     "screenfull": "^6.0.2",
+    "stwui": "^0.21.2-next",
     "svelte": "^4.0.0",
     "svelte-adapter-bun": "^0.5.1",
     "svelte-dnd-action": "^0.9.39",
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 90f2ddbc..8c88f321 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -9,9 +9,11 @@
   import { page } from "$app/stores";
   import { differenceInDays, getUnixTime, sub } from "date-fns";
   import { goto, invalidate } from "$app/navigation";
+  import { DatePicker } from "stwui";
 
   export let data;
 
+  let calendar;
   let { start, end, user, rates, payments } = data;
 
   let change = ({ target: { value } }) => goto(value);
@@ -144,6 +146,13 @@
       </div>
     </div>
 
+    <div data-theme="mytheme">
+      <DatePicker name="date" label="Date" showTime minuteStep={15}>
+        <DatePicker.Label slot="label">Date</DatePicker.Label>
+        <DatePicker.Trailing slot="trailing" data={calendar} />
+      </DatePicker>
+    </div>
+
     <div class="flex flex-wrap justify-center mb-8">
       {#if pages.length > 1}
         {#each pages as _, i}
@@ -256,7 +265,7 @@
           {$t("payments.tips")}
         {/if}
       </span>
-      <span></span>
+      <span />
 
       {#each Object.keys(totals) as c}
         {@const total = totals[c]["fiat"]}
@@ -265,12 +274,10 @@
         {@const gain = (pv * 100) / total - 100}
         <span class="text-lg"><b>{f(total, c)}</b></span>
         <span class="text-lg">
-          
-        {#if payments.some((p) => p.tip > 0)}
-          <b>{f(tips, c)}</b>
-        {/if}
-      <span></span>
-        
+          {#if payments.some((p) => p.tip > 0)}
+            <b>{f(tips, c)}</b>
+          {/if}
+          <span />
         </span>
       {/each}
     </div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 746f4ca6..4ab8945f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,26 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,svelte}"],
+  content: [
+    "./src/**/*.{html,js,svelte}",
+    "./node_modules/stwui/**/*.{svelte,js,ts,html}",
+  ],
+  stwui: {
+    themes: [
+      "light",
+      "dark",
+      {
+        mytheme: {
+          primary: "#2563eb",
+          default: "#333",
+          danger: "#dc2626",
+          surface: "#ffffff",
+          background: "#F0F2F5",
+          border: "#E8E9EC",
+          hover: "#000000",
+        },
+      },
+    ],
+  },
   theme: {
     extend: {
       colors: {
@@ -12,6 +32,10 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwind-scrollbar")],
+  plugins: [
+    require("tailwind-scrollbar"),
+    require("@tailwindcss/forms"),
+    require("stwui/plugin"),
+  ],
   safelist: ["w-16", "h-16", "w-20", "h-20", "w-24", "h-24"],
 };