Spaces:
Running
Running
File size: 4,527 Bytes
9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a a6ba3b9 9a9d18a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import React from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Terminal } from "lucide-react";
import { useApi } from "@/contexts/ApiContext";
interface UsageInstructionsModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
const UsageInstructionsModal: React.FC<UsageInstructionsModalProps> = ({
open,
onOpenChange,
}) => {
const { baseUrl } = useApi();
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="bg-gray-900 border-gray-700 text-gray-300 sm:max-w-xl">
<DialogHeader className="text-center sm:text-center">
<DialogTitle className="text-white flex items-center justify-center gap-2 text-xl">
<Terminal className="w-6 h-6" />
Getting Started with LeLab
</DialogTitle>
<DialogDescription>
Quick setup guide to get LeLab running on your machine.
</DialogDescription>
</DialogHeader>
<div className="space-y-6 text-sm py-4">
<div className="space-y-4">
<h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
1. Installation
</h4>
<p className="text-gray-300 leading-relaxed">
Install LeLab directly from GitHub (virtual environment
recommended):
</p>
<pre className="bg-gray-800 p-4 rounded-lg text-xs overflow-x-auto text-left border border-gray-700">
<code className="text-green-400">
pip install git+https://github.com/nicolas-rabault/leLab
</code>
</pre>
<p className="text-gray-400 text-xs mt-2">
💡 <strong>Tip:</strong> Create a virtual environment first with{" "}
<code className="bg-gray-800 px-1 rounded text-xs">
python -m venv .venv
</code>
</p>
</div>
<div className="space-y-4">
<h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
2. Running LeLab
</h4>
<p className="text-gray-300 leading-relaxed">
After installation, start LeLab with:
</p>
<pre className="bg-gray-800 p-4 rounded-lg text-xs overflow-x-auto text-left border border-gray-700">
<code className="text-blue-400">lelab</code>
</pre>
<p className="text-gray-300 leading-relaxed">
This will start the FastAPI backend server on{" "}
<a
href={baseUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:underline font-medium"
>
{baseUrl}
</a>
</p>
</div>
<div className="space-y-4">
<h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
3. Additional Commands
</h4>
<div className="space-y-3">
<div>
<code className="bg-gray-800 px-2 py-1 rounded font-mono text-sm text-yellow-400">
lelab-fullstack
</code>
<p className="text-gray-400 text-xs mt-1 ml-2">
Starts both backend and frontend development servers
</p>
</div>
<div>
<code className="bg-gray-800 px-2 py-1 rounded font-mono text-sm text-purple-400">
lelab-frontend
</code>
<p className="text-gray-400 text-xs mt-1 ml-2">
Starts only the frontend development server
</p>
</div>
</div>
</div>
<div className="pt-4 border-t border-gray-700">
<p className="text-gray-400 text-xs text-center">
For detailed documentation, visit the{" "}
<a
href="https://github.com/nicolas-rabault/leLab"
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:underline font-medium"
>
LeLab GitHub repository
</a>
</p>
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default UsageInstructionsModal;
|