Tide Text

"use client";

import { useState } from "react";
import { Slider } from "@/components/miyuki-ui/slider";
import { TideText } from "@/components/miyuki-ui/tide-text";

export default function TideTextDemo() {
  const [level, setLevel] = useState(62);

  return (
    <div className="flex w-full max-w-3xl flex-col items-center gap-10 text-center">
      <h2 className="font-display text-[52px] leading-[1.05] font-semibold tracking-[-0.03em] text-balance sm:text-[88px]">
        <TideText value={level}>HIGH TIDE 06:42</TideText>
      </h2>
      <div className="w-full max-w-xs text-left">
        <Slider
          label="Water at Otaru harbour"
          value={level}
          onChange={(v) => setLevel(v as number)}
          formatOptions={{ style: "unit", unit: "percent", maximumFractionDigits: 0 }}
        />
      </div>
    </div>
  );
}

"use client";

import { TideText } from "@/components/miyuki-ui/tide-text";

export default function TideTextScrollDemo() {
  return (
    <div className="h-[360px] w-full max-w-2xl overflow-y-auto rounded-2xl border border-border bg-card">
      <div className="flex h-[300px] items-end justify-center pb-6 text-sm text-muted-foreground">Scroll down</div>
      <div className="flex justify-center px-6 py-10">
        <h2 className="font-display text-[44px] leading-none font-semibold tracking-[-0.03em] sm:text-[72px]">
          <TideText>Spring tide</TideText>
        </h2>
      </div>
      <p className="mx-auto h-[420px] max-w-sm px-6 text-center text-sm text-muted-foreground">
        Otaru harbour, 2.1 m above chart datum at 06:42. The level follows the headline up the panel.
      </p>
    </div>
  );
}