Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📆 Add CreateEvent Component #24

Merged
merged 3 commits into from
Nov 19, 2024
Merged

📆 Add CreateEvent Component #24

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a5e07a
📆 Add CreateEvent Component
vincenttannos Nov 19, 2024
6be1c44
📆 Apply Style Suggestions to CreateEvent Component
vincenttannos Nov 19, 2024
2dfbf9a
🔙 Add BackButton Component
vincenttannos Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Keyword, KeywordOptions } from "./Keyword/Keyword";
import bbq from "./assets/bbq.png";
import NavBar from "./NavBar/NavBar";
import Button, { ButtonOptions } from "./Button/Button";
import CreateEvent from "./CreateEvent/CreateEvent";

function App() {
return (
Expand All @@ -30,6 +31,7 @@ function App() {
<Button type={ButtonOptions.Plus}></Button>
<Button type={ButtonOptions.Bookmark}></Button>
<Button type={ButtonOptions.String}>Log in</Button>
<CreateEvent></CreateEvent>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
<NavBar profileImage="https://i.redd.it/white-pharaoh-in-school-textbook-v0-fgr8oliazlkd1.jpg?width=225&format=pjpg&auto=webp&s=04dc4c2c8a0170c4e161091673352cd966591475"></NavBar>
</>
);
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,22 @@ export enum ButtonOptions {
type ButtonProps = {
children?: string;
type: ButtonOptions;
className?: string;
};

function Button(props: ButtonProps) {
return (
<button className={classes.button}>
{props.type === ButtonOptions.Plus && (
<PlusIcon className={classes.icon}></PlusIcon>
<PlusIcon className={`${classes.icon} ${props.className}`}></PlusIcon>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
)}

{props.type === ButtonOptions.Bookmark && (
<BookmarkIcon className={classes.icon}></BookmarkIcon>
<BookmarkIcon className={`${classes.icon} ${props.className}`}></BookmarkIcon>
)}

{props.type === ButtonOptions.String && (
<span className={classes.string}>{props.children}</span>
<span className={`${classes.string} ${props.className}`}>{props.children}</span>
)}
</button>
);
Expand Down
99 changes: 99 additions & 0 deletions frontend/src/CreateEvent/CreateEvent.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
.container {
margin: 80px;
margin-right: 15vw;
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
float: right;
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
}

.back {
width: 50px;
height: 50px;
background-color: hsl(0, 0%, 85%);
border-radius: 25px;
margin: 16px;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 0px;
}

.back:hover {
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
background-color: hsl(0, 0%, 93%);
color: hsl(0, 0%, 18%);
}

.chevronIcon {
height: 32px;
width: 32px;
margin-left: -2px;
}

.main {
width: 40vw;
min-width: 400px;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
margin-bottom: 24px;
font-weight: bolder;
}

.plusIcon {
width: 50px;
height: 50px;
padding: 10px;
}

.photo {
border: 4px hsl(0, 0%, 85%) dashed;
height: 120px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
color: hsl(0, 0%, 60%);
margin-bottom: 36px;
}

.cameraIcon {
height: 42px;
width: 42px;
margin: 12px;
}

.field {
margin: 0px;
margin-bottom: 12px;
}

.textInput {
background-color: hsl(0, 0%, 93%);
color: hsla(0, 0%, 0%, 30%);
height: fit-content;
min-height: 48px;
font-size: 18px;
border-radius: 8px;
padding: 14px;
margin-bottom: 34px;
}

.times {
display: flex;
justify-content: space-between;
gap: 12px;
}

.timeInput {
width: 23vh;
}

.description {
line-height: 160%;
padding-left: 20px;
padding-right: 20px;
}
54 changes: 54 additions & 0 deletions frontend/src/CreateEvent/CreateEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import classes from "./CreateEvent.module.css";
import Button, { ButtonOptions } from "../Button/Button";
import { ChevronLeftIcon } from "@heroicons/react/24/solid";
import { CameraIcon } from "@heroicons/react/24/outline";

function CreateEvent() {
return (
<div className={classes.container}>
<button className={classes.back}>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
<ChevronLeftIcon className={classes.chevronIcon}></ChevronLeftIcon>
</button>
<div className={classes.main}>
<div className={classes.header}>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
<h1>Create new event</h1>
<Button
type={ButtonOptions.Plus}
className={classes.plusIcon}
></Button>
</div>
<div className={classes.photo}>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
<CameraIcon className={classes.cameraIcon}></CameraIcon>
<p>Upload photo here...</p>
</div>
<h3 className={classes.field}>Event name</h3>
vincenttannos marked this conversation as resolved.
Show resolved Hide resolved
<div className={classes.textInput}>Training Program Induction</div>
<h3 className={classes.field}>Event location</h3>
<div className={classes.textInput}>John Lions Garden</div>
<div className={classes.times}>
<div className={classes.timeInput}>
<h3 className={classes.field}>Date</h3>
<div className={classes.textInput}>6/5/24</div>
</div>
<div className={classes.timeInput}>
<h3 className={classes.field}>Start time</h3>
<div className={classes.textInput}>11:00AM</div>
</div>
<div className={classes.timeInput}>
<h3 className={classes.field}>End time</h3>
<div className={classes.textInput}>5:00PM</div>
</div>
</div>
<h3 className={classes.field}>Description</h3>
<div className={`${classes.textInput} ${classes.description}`}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
elementum pulvinar cursus. Duis vel convallis orci. Duis blandit
ultrices hendrerit. Morbi ullamcorper vehicula arcu, et suscipit ex
posuere quis. Sed turpis massa, placerat ut sem
</div>
</div>
</div>
);
}

export default CreateEvent;