Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-06-28 12:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update synology page

Browse Source
This commit is contained in:
MacRimi 2025-03-20 20:02:45 +01:00
parent 27af106931
commit 14c42ecc97
1 changed files with 451 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

494
web/app/docs/create-vm/synology/page.tsx
View File

@ -1,15 +1,15 @@
"use client" "use client"
import type React from "react"
import Image from "next/image" import Image from "next/image"
import { Wrench, Target, CheckCircle } from "lucide-react" import { Wrench, Target, CheckCircle, Github } from "lucide-react"
import { useState } from "react" import { useState } from "react"
export default function Page() { export default function Page() {
const [activeLoader, setActiveLoader] = useState("arc")
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-6">Create Synology DSM VM using ProxMenux</h1> <h1 className="text-3xl font-bold mb-6">Create VM Synology DSM</h1>
<section className="mb-10"> <section className="mb-10">
<h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2> <h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2>
@ -18,19 +18,51 @@ export default function Page() {
Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM
boot, giving you the option between three different choices: boot, giving you the option between three different choices:
</p> </p>
<ul className="list-disc pl-5 mb-4"> <ul className="list-disc pl-5 mb-4">
<li>AuxXxilium Arc (referred to as "arc")</li> <li>
<li>edPill rr (referred to as "rr")</li> <a
<li>TinyCore RedPill M-shell (referred to as "tinycore")</li> href="https://github.com/AuxXxilium/arc"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
AuxXxilium Arc
</a>{" "}
(referred to as "arc")
</li>
<li>
<a
href="https://github.com/RROrg/rr"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
RedPill rr
</a>{" "}
(referred to as "rr")
</li>
<li>
<a
href="https://github.com/PeterSuh-Q3/tinycore-redpill"
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline"
>
TinyCore RedPill M-shell
</a>{" "}
(referred to as "tinycore")
</li>
</ul> </ul>
<p className="mb-4"> <p className="mb-4">
You also have the option to add a custom loader if you prefer to modify or create your own configuration. You also have the option to add a custom loader if you prefer to modify or create your own configuration.
</p> </p>
<p className="mb-4"> <p className="mb-4">
All loaders are similar although each has its own structure and configuration methods. This guide describes All loaders are similar although each has its own structure and configuration methods. This guide describes
the 6 basic steps involved in setting up a Synology DSM loader. The exact steps may vary depending on the the 6 basic steps involved in setting up a Synology DSM loader. The exact steps may vary depending on the
loader and/or changes introduced by the developer, so understanding the basic steps similar in all of them loader and/or changes introduced by the developer, so <strong>understanding the basic steps</strong> similar in all of them
will help you know how to build the loader of your choice for the proper functioning of Synology DS. will <strong>help you know how to build the loader</strong> of your choice for the proper functioning of Synology DSM.
</p> </p>
</section> </section>
@ -40,9 +72,46 @@ export default function Page() {
Step-by-Step Guide Step-by-Step Guide
</h2> </h2>
<p className="mb-6"> <p className="mb-6">
This guide will walk you through the process of configuring the loader and setting up the VM. Each step This guide will walk you through the process of configuring the loader. Select your
includes screenshots to show how the process looks with the three loaders (arc, rr, and tinycore). loader type below to see the steps for that loader.
</p> </p>
{/* Selector de loader global */}
<div className="bg-blue-50 p-4 rounded-lg mb-6">
<h3 className="text-lg font-semibold mb-2">Select your loader type:</h3>
<div className="flex space-x-4">
<button
onClick={() => setActiveLoader("arc")}
className={`px-4 py-2 rounded-md font-medium ${
activeLoader === "arc"
? "bg-blue-500 text-white"
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
}`}
>
Arc Loader
</button>
<button
onClick={() => setActiveLoader("rr")}
className={`px-4 py-2 rounded-md font-medium ${
activeLoader === "rr"
? "bg-blue-500 text-white"
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
}`}
>
RR Loader
</button>
<button
onClick={() => setActiveLoader("tinycore")}
className={`px-4 py-2 rounded-md font-medium ${
activeLoader === "tinycore"
? "bg-blue-500 text-white"
: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50"
}`}
>
TinyCore Loader
</button>
</div>
</div>
</section> </section>
<section className="mb-12 border-b pb-8"> <section className="mb-12 border-b pb-8">
@ -51,68 +120,98 @@ export default function Page() {
Start the VM and Access the Main Menu Start the VM and Access the Main Menu
</h2> </h2>
<p className="mb-4"> <p className="mb-4">
Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to select
select and configure the DSM model you want to build. Once the loader is created, this step will be skipped and configure the DSM model you want to build. Once the loader is created, this step will be skipped unless you
unless you manually force a reconfiguration from the boot monitor. manually force a reconfiguration from the boot monitor. All loaders also have the option to configure the loader
via a web interface.
</p>
<div className="mt-6">
{activeLoader === "arc" && (
<div className="flex flex-col space-y-8">
<p className="mt-16 mb-2">
<strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
the IP address shown in the VM's console output. For example, in our case: http://192.169.0.32.
</p>
<ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_0_1.png"
alt="Arc Loader Web Interface"
caption="Arc Loader Web Interface"
/>
<p className="mt-16 mb-2">
<strong>Terminal interface</strong>, Access it directly from the VM's console output.
</p> </p>
<TabGroup
tabs={[
{
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
alt="Arc Loader Interface" alt="Arc Loader Terminal Interface"
caption="Arc Loader Interface" caption="Arc Loader Terminal Interface"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-8">
label: "RR Loader",
content: ( <p className="mt-16 mb-2">
<div className="flex flex-col space-y-8 mt-6"> <strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
<div className="bg-gray-50 p-4 rounded-lg mb-6"> the IP address shown in the VM's console output. For example, in our case: http://192.169.0.33.
<p className="mb-2">
<strong>In the case of RR</strong>, you'll need to manually enter the following command to open
the menu:
</p> </p>
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
<code>./menu.sh</code> <ImageWithCaption
</pre> src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_2.png"
</div> alt="RR Command Example"
caption="RR Loader Web Interface"
/>
<p className="mt-16 mb-2">
<strong>Terminal interface</strong>, Access it directly from the VM's console output by typing <strong>menu.sh</strong> on the screen
</p>
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
alt="RR Command Example" alt="RR Loader Interface"
caption="RR Command Example: ./menu.sh" caption="RR Loader Terminal Interface"
/> />
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
alt="RR Loader Interface" alt="RR Loader Interface"
caption="RR Loader Interface" caption="RR Loader Terminal Interface"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-8">
label: "TinyCore Loader",
content: ( <p className="mt-16 mb-2">
<div className="flex flex-col space-y-8 mt-6"> <strong>Web interface</strong>, To access the web interface, simply open a web browser and enter
the IP address shown in the VM's console output. For example, in our case: http://192.169.0.35.
</p>
<ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_0_1.png"
alt="TinyCore Loader Interface"
caption="TinyCore Loader Web Interface"
/>
<p className="mt-16 mb-2">
<strong>Terminal interface</strong>, Access it directly from the VM's console output. Keep an eye on
the screen, as at some point it may prompt you to press a key to continue or ask if you want to change the language.
</p>
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
alt="TinyCore Loader Interface" alt="TinyCore Loader Interface"
caption="TinyCore Loader Interface" caption="TinyCore Loader Terminal Interface"
/> />
</div> </div>
), )}
}, </div>
]}
/>
</section> </section>
<section className="mb-12 border-b pb-8"> <section className="mb-12 border-b pb-8">
@ -124,50 +223,38 @@ export default function Page() {
After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may
sometimes need to expand the options to see more models. sometimes need to expand the options to see more models.
</p> </p>
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
<TabGroup <div className="mt-6">
tabs={[ {activeLoader === "arc" && (
{ <div className="flex flex-col space-y-8">
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
alt="Arc Model Selection" alt="Arc Model Selection"
caption="Arc Model Selection" caption="Arc Model Selection"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-8">
label: "RR Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
alt="RR Model Selection" alt="RR Model Selection"
caption="RR Model Selection" caption="RR Model Selection"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-8">
label: "TinyCore Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
alt="TinyCore Model Selection" alt="TinyCore Model Selection"
caption="TinyCore Model Selection" caption="TinyCore Model Selection"
/> />
</div> </div>
), )}
}, </div>
]}
/>
<p className="mt-4">In our example, we'll choose the SA6400 model.</p> <p className="mt-4">In our example, we'll choose the SA6400 model.</p>
</section> </section>
@ -180,13 +267,9 @@ export default function Page() {
After selecting the model, you need to choose the DSM version you want to install. After selecting the model, you need to choose the DSM version you want to install.
</p> </p>
<TabGroup <div className="mt-6">
tabs={[ {activeLoader === "arc" && (
{ <div className="flex flex-col space-y-16">
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
alt="Arc Version Selection - Step 1" alt="Arc Version Selection - Step 1"
@ -198,13 +281,10 @@ export default function Page() {
caption="Arc Version Selection - Step 2" caption="Arc Version Selection - Step 2"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-16">
label: "RR Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
alt="RR Version Selection - Step 1" alt="RR Version Selection - Step 1"
@ -221,13 +301,10 @@ export default function Page() {
caption="RR Version Selection - Step 3" caption="RR Version Selection - Step 3"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-16">
label: "TinyCore Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
alt="TinyCore Version Selection - Step 1" alt="TinyCore Version Selection - Step 1"
@ -239,10 +316,8 @@ export default function Page() {
caption="TinyCore Version Selection - Step 2" caption="TinyCore Version Selection - Step 2"
/> />
</div> </div>
), )}
}, </div>
]}
/>
</section> </section>
<section className="mb-12 border-b pb-8"> <section className="mb-12 border-b pb-8">
@ -252,16 +327,13 @@ export default function Page() {
</h2> </h2>
<p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p> <p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
<TabGroup <div className="mt-6">
tabs={[ {activeLoader === "arc" && (
{ <div className="flex flex-col space-y-16">
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<p className="mb-2"> <p className="mb-2">
<strong>Arc</strong> gives you the option to configure automatically or manually adjust the <strong>Arc</strong> gives you the option to configure automatically or manually adjust the settings.
settings. If automatic configuration is selected, the loader will start applying the necessary settings and will
automatically reboot once the process is complete.
</p> </p>
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
@ -269,8 +341,8 @@ export default function Page() {
caption="Arc Auto Configuration" caption="Arc Auto Configuration"
/> />
<p className="mb-2"> <p className="mb-2">
If we choose not to use automatic mode, we enter the menu to configure different options necessary If we choose not to use automatic mode, we enter the menu to configure different options necessary for
for the loader: the loader:
</p> </p>
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
@ -293,13 +365,10 @@ export default function Page() {
caption="Arc Add-Ons Selection" caption="Arc Add-Ons Selection"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-8">
label: "RR Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
alt="RR Add-On Step 1" alt="RR Add-On Step 1"
@ -316,13 +385,10 @@ export default function Page() {
caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3" caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-8">
label: "TinyCore Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
alt="TinyCore SN Configuration" alt="TinyCore SN Configuration"
@ -344,10 +410,8 @@ export default function Page() {
caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one" caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
/> />
</div> </div>
), )}
}, </div>
]}
/>
</section> </section>
<section className="mb-12 border-b pb-8"> <section className="mb-12 border-b pb-8">
@ -360,50 +424,38 @@ export default function Page() {
take a few minutes depending on the loader and the selected configuration. To start, select the "Build the take a few minutes depending on the loader and the selected configuration. To start, select the "Build the
Loader" option. Loader" option.
</p> </p>
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
<TabGroup <div className="mt-6">
tabs={[ {activeLoader === "arc" && (
{ <div className="flex flex-col space-y-8">
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
alt="Arc Build Loader" alt="Arc Build Loader"
caption="Arc Build Loader" caption="Arc Build Loader"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-8">
label: "RR Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
alt="RR Build Loader" alt="RR Build Loader"
caption="RR Build Loader" caption="RR Build Loader"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-8">
label: "TinyCore Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
alt="TinyCore Build Loader" alt="TinyCore Build Loader"
caption="TinyCore Build Loader" caption="TinyCore Build Loader"
/> />
</div> </div>
), )}
}, </div>
]}
/>
</section> </section>
<section className="mb-12 border-b pb-8"> <section className="mb-12 border-b pb-8">
@ -415,50 +467,38 @@ export default function Page() {
Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've
created and start the DSM installation. created and start the DSM installation.
</p> </p>
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
<TabGroup <div className="mt-6">
tabs={[ {activeLoader === "arc" && (
{ <div className="flex flex-col space-y-8">
id: "arc",
label: "Arc Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
alt="Arc Boot Loader" alt="Arc Boot Loader"
caption="Arc Boot Loader" caption="Arc Boot Loader"
/> />
</div> </div>
), )}
},
{ {activeLoader === "rr" && (
id: "rr", <div className="flex flex-col space-y-8">
label: "RR Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
alt="RR Boot Loader" alt="RR Boot Loader"
caption="RR Boot Loader" caption="RR Boot Loader"
/> />
</div> </div>
), )}
},
{ {activeLoader === "tinycore" && (
id: "tinycore", <div className="flex flex-col space-y-8">
label: "TinyCore Loader",
content: (
<div className="flex flex-col space-y-8 mt-6">
<ImageWithCaption <ImageWithCaption
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png" src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
alt="TinyCore Boot Loader" alt="TinyCore Boot Loader"
caption="TinyCore Boot Loader" caption="TinyCore Boot Loader"
/> />
</div> </div>
), )}
}, </div>
]}
/>
</section> </section>
{/* STARTING DSM INSTALLATION */} {/* STARTING DSM INSTALLATION */}
@ -487,57 +527,71 @@ export default function Page() {
</section> </section>
<section className="mb-8"> <section className="mb-8">
<h2 className="text-2xl font-semibold mb-4 flex items-center"> <h2 className="text-2xl font-semibold mt-20 mb-4 flex items-center">
<Target className="h-6 w-6 mr-2 text-blue-500" /> <Target className="h-6 w-6 mr-2 text-blue-500" />
Tips Tips
</h2> </h2>
<ul className="list-disc pl-5 space-y-2"> <ul className="list-disc pl-5 space-y-4">
<li> <li>
Keep in mind that available options may change depending on the loader version and developer updates. If you Keep in mind that available options may change depending on the loader version and developer updates. If you
encounter issues during the loader creation process, consult the loader documentation. ProxMenux does not encounter issues during the loader creation process, consult the loader documentation:
provide support for the different loaders.
</li> </li>
<li>Some loaders offer the possibility of configuration via web with ip:7080 or 7090.</li>
<div className="flex flex-wrap gap-4 mt-2">
<a
href="https://github.com/AuxXxilium/arc"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
>
<Github className="h-5 w-5 mr-2" />
Arc Documentation
</a>
<a
href="https://github.com/RROrg/rr"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
>
<Github className="h-5 w-5 mr-2" />
RR Documentation
</a>
<a
href="https://github.com/PeterSuh-Q3/tinycore-redpill"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors"
>
<Github className="h-5 w-5 mr-2" />
TinyCore Documentation
</a>
</div>
<li> <li>
Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more
recent models. recent models.
</li> </li>
<div className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4">
<p className="font-semibold">Update:</p>
<p>
Some loaders offer the option to update the loader directly from the menu.
</p>
</div>
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4">
<p className="font-semibold">Important:</p>
<p>
ProxMenux does not provide support for the different loaders.
</p>
</div>
</ul> </ul>
</section> </section>
</div> </div>
) )
} }
interface Tab {
id: string
label: string
content: React.ReactNode
}
function TabGroup({ tabs }: { tabs: Tab[] }) {
const [activeTab, setActiveTab] = useState(tabs[0].id)
return (
<div className="mt-4">
<div className="flex border-b">
{tabs.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`px-4 py-2 font-medium text-sm focus:outline-none ${
activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"
}`}
>
{tab.label}
</button>
))}
</div>
<div className="mt-4">{tabs.find((tab) => tab.id === activeTab)?.content}</div>
</div>
)
}
function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) { function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
return ( return (
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4"> <div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">