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

done users page layout

Browse Source
This commit is contained in:
benzbarquilla
2026-03-02 16:46:25 +08:00
parent fade69f596
commit d2cba825ec
2 changed files with 156 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/app/home/page.jsx
View File

@@ -1,7 +1,64 @@
import React from "react"; import React from "react";
import userDashboardStyle from "./styles.module.css";
const HomePage = () => { const HomePage = () => {
return <div></div>; return (
// Main
<div className={userDashboardStyle.mainWrapper}>
<div className={userDashboardStyle.mainContainer}>
<div className={userDashboardStyle.userDashContainer}>
{/* User Name */}
<div className={userDashboardStyle.userNameContainer}>
{/* Name and Welcome Msg */}
<div className={userDashboardStyle.nameSection}>
{/* Weather */}
<div className={userDashboardStyle.weather}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
stroke="white"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p>
Friday, Feb 23
<span className={userDashboardStyle.ordinal}>rd</span>
</p>
</div>
{/* Name */}
<div className={userDashboardStyle.name}>
<p className={userDashboardStyle.welcomeGreet}>Hi, Grills!</p>
<p className={userDashboardStyle.welcomeMsg}>
Welcome to the ISAAC IDP!
</p>
</div>
</div>
{/* Logo */}
<div className={userDashboardStyle.logoSection}></div>
</div>
{/* Link */}
<div></div>
{/* Extra Space */}
<div></div>
</div>
</div>
</div>
);
}; };
export default HomePage; export default HomePage;

98
frontend/src/app/home/styles.module.css
View File

@@ -0,0 +1,98 @@
.mainWrapper {
display: flex;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.mainContainer {
display: flex;
padding: 36px;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #191a24;
background: color(display-p3 0.098 0.102 0.1373);
}
.userDashContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: #191a24;
background: color(display-p3 0.098 0.102 0.1373);
}
.userNameContainer {
display: flex;
padding: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: #21232f;
background: color(display-p3 0.1294 0.1373 0.1804);
}
.nameSection {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
}
.logoSection {
display: flex;
padding-right: 16px;
flex-direction: column;
justify-content: flex-end;
align-items: center;
align-self: stretch;
}
.weather {
display: flex;
align-items: center;
gap: 12px;
align-self: stretch;
}
.weather > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.18px;
}
.ordinal {
font-size: 0.6em;
vertical-align: super;
}
.name {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 48px;
align-self: stretch;
}
.welcomeGreet {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.24px;
}
.welcomeMsg {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.4px;
}