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

convert to components

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/app/components/fields/styles.module.css Normal file
View File

@@ -0,0 +1,37 @@
.input {
display: flex;
padding: 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
width: 100%;
align-self: stretch;
border-radius: 6px;
border: 1px solid #616583;
background-color: transparent;
color: white;
font-family: Inter;
font-size: 16px;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.input:focus {
border-radius: 6px;
border: 1px solid #a8aac1;
background: rgba(75, 79, 109, 0.25);
}
.input:hover {
background: rgba(75, 79, 109, 0.25);
}
.input::placeholder {
color: #85869b;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

9
frontend/src/app/components/fields/textfield.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from "react";
import styles from "./styles.module.css";
const TextField = ({ placeHolder }) => {
return (
<input className={styles.input} type="text" placeholder={placeHolder} />
);
};
export default TextField;

31
frontend/src/app/components/icons/close.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from "react";
const CloseIcon = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
{...props}
>
<path
d="M20.7077 7.29199L7.29102 20.7087"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.29102 7.29199L20.7077 20.7087"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default CloseIcon;

35
frontend/src/app/components/toast/success/styles.module.css Normal file
View File

@@ -0,0 +1,35 @@
.toastContainer {
display: flex;
padding: 14px 10px 14px 16px;
align-items: center;
gap: 16px;
border-radius: 10px;
border: 1px solid #a6facc;
background: #eefdf3;
position: absolute;
bottom: 25px;
z-index: 11;
right: 20px;
}
.messageContainer {
display: flex;
align-items: center;
gap: 12px;
}
.iconContainer {
display: flex;
padding: 4px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
background: #a6facc;
}
.messageContainer p {
color: #006929;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

45
frontend/src/app/components/toast/success/successToast.jsx Normal file
View File

@@ -0,0 +1,45 @@
import React from "react";
import styles from "./styles.module.css";
const SuccessToast = ({ message }) => {
return (
<div className={styles.toastContainer}>
<div className={styles.messageContainer}>
<div className={styles.iconContainer}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
stroke="#016730"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<p>{message}</p>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M15 5L5 15M5 5L15 15"
stroke="#016730"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
};
export default SuccessToast;

10
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -1,19 +1,22 @@
"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation";
import { usePathname, useRouter, useParams } from "next/navigation";
const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
const pathName = usePathname();
const router = useRouter();
const params = useParams();
const handleNavigateToAdd = () => {
router.push(`${pathName}/add`);
};
return (
<div className={styles.container}>
<div className={styles.title}>
{pathName.includes("/view") && props.state === "view" && (
{((pathName.includes("/view") && props.state === "view") ||
params.usersId ||
params.roleId) && (
<div onClick={() => router.back()}>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +28,6 @@ const TopHeader = (props) => {
<path
d="M5 12H19"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
@@ -33,7 +35,6 @@ const TopHeader = (props) => {
<path
d="M5 12L11 18"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
@@ -41,7 +42,6 @@ const TopHeader = (props) => {
<path
d="M5 12L11 6"
stroke="#8287FF"
style={{ stroke: "#8287FF", strokeOpacity: 1 }}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"

4
frontend/src/app/globals.css
View File

@@ -42,8 +42,8 @@ a {
}
}
::-webkit-scrollbar {
width: 8px; /* vertical */
height: 8px; /* horizontal */
width: 8px;
height: 8px;
background-color: transparent;
}

3
frontend/src/app/organization/add/page.jsx
View File

@@ -4,6 +4,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css";
import Image from "next/image";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
const AddCredentials = () => {
return (
<div className={globalStyle.section}>
@@ -70,7 +71,7 @@ const AddCredentials = () => {
</p>
</div>
<div className={styles.inputField}>
<input type="text" placeholder="Enter organization name" />
<TextField placeHolder="Enter organization name" />
<div className={styles.prompts}>
<svg
xmlns="http://www.w3.org/2000/svg"

3
frontend/src/app/organization/add/styles.module.css
View File

@@ -149,8 +149,7 @@
}
.inputField > input {
display: flex;
height: 44px;
padding: 12px 16px;
padding: 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;

2
frontend/src/app/organization/page.jsx
View File

@@ -3,6 +3,7 @@ import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import SuccessToast from "../components/toast/success/successToast";
const OrganizationPage = () => {
const sampleData = [
@@ -54,6 +55,7 @@ const OrganizationPage = () => {
return (
<div className={globalStyle.section}>
<SuccessToast />
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Organization" topbarTitle="Organization" />

2
frontend/src/app/projects/page.jsx
View File

@@ -4,6 +4,7 @@ import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import SuccessToast from "../components/toast/success/successToast";
const ProjectsPage = () => {
const router = useRouter();
const sampleData = [
@@ -165,6 +166,7 @@ const ProjectsPage = () => {
return (
<div className={globalStyle.section}>
<SuccessToast message="Project successfully added!" />
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Create Project" topbarTitle="Project" />

28
frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx
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) => {

36
frontend/src/app/projects/view/add-from-scratch/page.jsx
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>

1
frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx Normal file
View File

@@ -0,0 +1 @@

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

45
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx Normal file
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;

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

0
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx Normal file
View File

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

1
frontend/src/app/projects/view/page.jsx
View File

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