PlaceholderPage.jsx 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. /**
  2. * PlaceholderPage
  3. *
  4. * A small, reusable component to render consistent placeholder pages.
  5. *
  6. * Goals:
  7. * - Avoid duplicating layout code across many route pages.
  8. * - Make it easy to replace placeholders with real UI later.
  9. */
  10. export default function PlaceholderPage({
  11. title,
  12. description,
  13. params,
  14. children,
  15. }) {
  16. return (
  17. <div className="space-y-4">
  18. <div className="space-y-1">
  19. <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
  20. {description ? (
  21. <p className="text-sm text-muted-foreground">{description}</p>
  22. ) : null}
  23. </div>
  24. <div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
  25. <div className="space-y-3">
  26. <p className="text-sm font-medium">Route params</p>
  27. {params ? (
  28. <pre className="overflow-auto rounded-md bg-muted p-3 text-xs">
  29. {JSON.stringify(params, null, 2)}
  30. </pre>
  31. ) : (
  32. <p className="text-xs text-muted-foreground">
  33. No params for this route.
  34. </p>
  35. )}
  36. {children ? <div className="pt-2">{children}</div> : null}
  37. </div>
  38. </div>
  39. </div>
  40. );
  41. }