convert to components

This commit is contained in:
Laux Dev
2026-02-27 16:07:07 +08:00
parent 6afc34a96c
commit 2e772b2044
20 changed files with 236 additions and 56 deletions

View File

@@ -2,6 +2,7 @@
import React from "react";
import styles from "./styles.module.css";
import { useRouter, usePathname } from "next/navigation";
import CloseIcon from "@/app/components/icons/close";
const AddServicesModal = (props) => {
const router = useRouter();
@@ -90,31 +91,8 @@ const AddServicesModal = (props) => {
<p>Choose how you want to create your service</p>
</div>
</div>
<svg
onClick={() => props.trigger(!props.triggerState)}
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
>
<path
d="M20.7077 7.29199L7.29102 20.7087"
stroke="white"
strokeOpacity="1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.29102 7.29199L20.7077 20.7087"
stroke="white"
strokeOpacity="1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<CloseIcon onClick={() => props.trigger(!props.triggerState)} />
</div>
<div className={styles.content}>
{servicesList.map((service, key) => {

View File

@@ -4,6 +4,7 @@ import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
@@ -37,11 +38,11 @@ const AddServices = () => {
<div>
<div>
<p>Name</p>
<input type="text" placeholder="Enter service name" />
<TextField placeHolder="Enter service name" />
</div>
<div>
<p>Version</p>
<input type="text" placeholder="Service version" />
<TextField placeHolder="Service version" />
</div>
</div>
<div>
@@ -49,13 +50,13 @@ const AddServices = () => {
<p>
Image <span>(Optional)</span>
</p>
<input type="text" placeholder="Enter image name" />
<TextField placeHolder="Enter image name" />
</div>
</div>
<div>
<div>
<p>Port</p>
<input type="text" placeholder="Enter port" />
<TextField placeHolder="Enter port" />
</div>
</div>
<div>
@@ -82,21 +83,21 @@ const AddServices = () => {
<div>
<div>
<p>CPU Request (MB)</p>
<input type="text" placeholder="100" />
<TextField placeHolder="250" />
</div>
<div>
<p>CPU Limit (MB)</p>
<input type="text" placeholder="250" />
<TextField placeHolder="250" />
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<input type="text" placeholder="250" />
<TextField placeHolder="250" />
</div>
<div>
<p>Memory Limit (MB)</p>
<input type="text" placeholder="500" />
<TextField placeHolder="500" />
</div>
</div>
</div>
@@ -114,14 +115,12 @@ const AddServices = () => {
<div>
<div>
<p>Name</p>
<input
type="text"
placeholder="Enter service name"
/>
<TextField placeHolder="Enter service name" />
</div>
<div>
<p>Version</p>
<input type="text" placeholder="Service version" />
<TextField placeHolder="Services version" />
</div>
</div>
</div>
@@ -169,17 +168,12 @@ const AddServices = () => {
<div>
<div>
<p>Liveness Path</p>
<input
type="text"
placeholder="Enter liveness path"
/>
<TextField placeHolder="Enter liveness path" />
</div>
<div>
<p>Liveness Port</p>
<input
type="text"
placeholder="Enter liveness port"
/>
<TextField placeHolder="Enter liveness port" />
</div>
</div>
</div>

View File

@@ -0,0 +1,45 @@
import React from "react";
import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
const AddConfigMapModal = () => {
return (
<div className={styles.container}>
<div className={styles.modal}>
<div className={styles.modalHeader}>
<p>Environment Variables</p>
<CloseIcon />
</div>
<div className={styles.contentContainer}>
<div>
<div className={styles.contentHeader}>
<div>
<p>Generic</p>
</div>
<div>
<p>Generic</p>
</div>
</div>
<div className={styles.fieldContainer}>
<div className={styles.fields}>
<div>
<div>
<div>
<p>Key</p>
<TextField placeHolder="Enter variable key" />
</div>
<div>
<p>Value</p>
<TextField placeHolder="Enter" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default AddConfigMapModal;

View File

@@ -144,6 +144,7 @@ const AddProject = () => {
triggerState={triggerAddServicesModal}
/>
)}
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>