Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added new features

Browse Source
This commit is contained in:
Laux Dev
2026-02-26 16:27:44 +08:00
parent bd94bb4618
commit ccd0caf14d
8 changed files with 901 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/app/projects/view/add-from-scratch/page.jsx Normal file
View File

@@ -0,0 +1,98 @@
import React from "react";
import globalStyle from "@/app/globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
const AddServices = () => {
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
buttonText="Save"
cancelButtonText="Cancel"
state="add"
topbarTitle="Create New Services"
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
</div>
<div className={styles.fieldsCreateNew}>
<div>
<div>
<p>
Repository <span>(Optional)</span>
</p>
<label className={styles.repositoryForm} htmlFor="#repo">
+ Link Repository
</label>
</div>
</div>
<div>
<div>
<p>Name</p>
<input type="text" placeholder="Enter service name" />
</div>
<div>
<p>Version</p>
<input type="text" placeholder="Service version" />
</div>
</div>
<div>
<div>
<p>
Image <span>(Optional)</span>
</p>
<input type="text" placeholder="Enter image name" />
</div>
</div>
<div>
<div>
<p>Port</p>
<input type="text" placeholder="Enter port" />
</div>
</div>
<div>
<div>
<p>Ingress</p>
<select name="" id="">
<option value="">Select</option>
</select>
</div>
<div>
<p>Ingress</p>
<select name="" id="">
<option value="">Select</option>
</select>
</div>
</div>
</div>
</div>
<div className={styles.resource}></div>
<div className={styles.additionalDetails}>
<div>
<div>
<div className={styles.header}>
<p>Auto Scaling</p>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
<div></div>
<div></div>
</div>
</div>
<div className={styles.variables}></div>
</div>
</div>
</div>
</div>
);
};
export default AddServices;

121
frontend/src/app/projects/view/add-from-scratch/styles.module.css Normal file
View File

@@ -0,0 +1,121 @@
.contentContainer {
display: flex;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fieldsContainerCreateNew {
display: flex;
padding-top: 36px;
flex-direction: column;
align-items: flex-start;
gap: 36px;
background: #191a24;
height: calc(100vh - 175px);
overflow-y: scroll;
scrollbar-width: none;
}
.projectDetails {
display: flex;
padding: 0 36px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
}
.projectDetailsHeader {
display: flex;
padding-bottom: 24px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.projectDetailsHeader p {
color: #d2d3e1;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.2px;
}
.fieldsCreateNew {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.fieldsCreateNew > div {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.fieldsCreateNew > div:nth-child(1) {
display: flex;
padding: 16px 0;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
}
.fieldsCreateNew > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.fieldsCreateNew > div > div p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.fieldsCreateNew > div > div p > span {
color: #85869b;
}
.fieldsCreateNew > div > div input,
.fieldsCreateNew > div > div select {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
background-color: transparent;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.fieldsCreateNew > div > div input::placeholder {
color: #85869b;
}
.repositoryForm {
display: flex;
padding: 12px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px dashed #5980f1;
color: #5980f1;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}