7f2dd5260f
- Complete React app with 7 developer tools - JSON Tool with visual structured editor - Serialize Tool with visual structured editor - URL, Base64, CSV/JSON, Beautifier, Diff tools - Responsive navigation with dropdown menu - Dark/light mode toggle - Mobile-responsive design with sticky header - All tools working with copy/paste functionality
41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const ToolLayout = ({ title, description, children, icon: Icon }) => {
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center text-primary-600 hover:text-primary-700 mb-4"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Tools
|
|
</Link>
|
|
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
{Icon && <Icon className="h-8 w-8 text-primary-600" />}
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
|
|
{description && (
|
|
<p className="text-gray-600 dark:text-gray-300 text-lg">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tool Content */}
|
|
<div className="space-y-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ToolLayout;
|