Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/planner-cardimport { 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>
);
}