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"