Stitch Button

"use client";

import StitchButton from "@/components/ui/stitch-button";
import * as React from "react";

export default function Demo() {
  const [n, setN] = React.useState(0);
  return (
    <div className="flex min-h-full w-full items-center justify-center p-8 bg-[#efe6d8]">
      <div className="flex flex-col items-center gap-4 text-center">
        <p className="font-mono text-[0.6875rem] uppercase tracking-[0.16em] text-[#6f6458]">
          Card wallet · Hand-stitched sample
        </p>
        <p className="text-[2rem] leading-none text-[#2b231c]">OMR 18.500</p>
        <StitchButton material="leather" onClick={() => setN((x) => x + 1)}>
          {n ? `In your basket · ${n}` : "Add to basket"}
        </StitchButton>
      </div>
    </div>
  );
}