Planner Card

Heroes 270

About

Route Planner Card A visually polished card component that displays route information, including duration, distance, an animated elevation graph, and a call-to-action. It's designed to be easily customized with props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Planner Card to your project and fits it to your theme.

Code

How Planner Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { RoutePlannerCard } from "@/components/ui/planner-card";
import { Bike } from "lucide-react";

/**
 * A demo component to showcase the RoutePlannerCard.
 */
export default function RoutePlannerCardDemo() {
  // Generate some random data for the elevation graph for a nice visual effect
  const sampleElevationData = Array.from({ length: 50 }, () => Math.random() * 80 + 20);

  const handleStart = () => {
    // In a real app, this would trigger navigation or tracking.
    console.log("Start button clicked!");
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <RoutePlannerCard
        alertMessage="Rain expected in 28 min."
        durationInMinutes={42}
        distance={5.9}
        climb={327}
        elevationData={sampleElevationData}
        routeFeature={{
          icon: <Bike className="h-5 w-5" />,
          text: "Protected bike lanes",
        }}
        onStart={handleStart}
      />
    </div>
  );
}