UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Create index.tsx

Browse Source
This commit is contained in:
Stefan Pejcic 2024-04-23 19:03:42 +02:00 committed by GitHub
parent a60bd654cb
commit 18552acfb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 109 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
documentation/src/pages/install/index.tsx Normal file
View File

@ -0,0 +1,109 @@
import React, { useState } from "react";
import Head from "@docusaurus/Head";
import { BlogFooter } from "@site/src/refine-theme/blog-footer";
import { CommonHeader } from "@site/src/refine-theme/common-header";
import { CommonLayout } from "@site/src/refine-theme/common-layout";
import clsx from "clsx";
const Install: React.FC = () => {
const [options, setOptions] = useState({
port: false,
lang: false,
hostname: false,
email: false,
password: false,
apache: true, // Default to true
phpfpm: true, // Default to true
// Add more options as needed
});
const [inputValues, setInputValues] = useState({
// Define initial input values if needed
});
const handleOptionChange = (option: string) => {
setOptions((prevOptions) => ({
...prevOptions,
[option]: !prevOptions[option],
}));
};
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target;
setInputValues((prevInputValues) => ({
...prevInputValues,
[name]: value,
}));
};
const generateInstallCommand = () => {
// Implement logic to generate the install command based on selected options and input values
let command = "Your install command here";
return command;
};
return (
<CommonLayout>
<Head title="Install | OpenPanel">
<html data-page="support" data-customized="true" />
</Head>
<div className="refine-prose">
<CommonHeader hasSticky={true} />
<div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
<h2 className="u-text-center">Installation instructions</h2>
<p className="u-mb10">
Log in to your server e.g.{" "}
<code>ssh root@your.server</code> then download the installation
script:
</p>
{/* Implement CopyToClipboardInput for first command */}
<p className="u-mb10">
Check you are running as the <code>root</code> user, configure the
options you want below, then run:
</p>
{/* Implement CopyToClipboardInput for second command */}
<h2 className="u-text-center">Configure options</h2>
<ul className="option-list">
{Object.keys(options).map((option) => (
<li
key={option}
className={clsx("option-item", "is-clickable", {
"is-active": options[option],
})}
>
<div className="option-header">
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id={option}
checked={options[option]}
onChange={() => handleOptionChange(option)}
/>
<label htmlFor={option}>{option}</label>
</div>
{/* Implement tooltip icon */}
</div>
</li>
))}
</ul>
{/* Implement input fields for additional input values */}
{/* Implement a button to generate the install command */}
<button
className="bg-blue-500 text-white px-4 py-2"
onClick={() => generateInstallCommand()}
>
Generate Install Command
</button>
</div>
<BlogFooter />
</div>
</CommonLayout>
);
};
export default Install;