convert to components
This commit is contained in:
@@ -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) => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -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;
|
||||
@@ -144,6 +144,7 @@ const AddProject = () => {
|
||||
triggerState={triggerAddServicesModal}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={globalStyle.section}>
|
||||
<div className={globalStyle.mainContainer}>
|
||||
<div className={globalStyle.container}>
|
||||
|
||||
Reference in New Issue
Block a user