Skip to content

Commit

Permalink
feat: events page but with many errors
Browse files Browse the repository at this point in the history
  • Loading branch information
JasonNotJson committed Dec 15, 2023
1 parent 3de18d5 commit d02210e
Show file tree
Hide file tree
Showing 8 changed files with 218 additions and 87 deletions.
2 changes: 1 addition & 1 deletion apps/events/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function Home() {
return (
<PageLayout title="Event">
<div className="text-right">
<Link href='/' className="btn-text">
<Link href='/events' className="btn-text">
<AccountBox /> My Page
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/events/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const nextConfig = {
images: {
unoptimized: true,
},
assetPrefix: process.env.APP_ENV = "production",
assetPrefix: process.env.APP_ENV === "production" ? "/events" : "",
env: {
APP_ENV: process.env.APP_ENV || "development"
},
Expand Down
2 changes: 1 addition & 1 deletion apps/events/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "wasedatiem-events",
"name": "wasedatime-events",
"version": "0.1.0",
"private": true,
"scripts": {
Expand Down
6 changes: 3 additions & 3 deletions apps/events/scss/btns-main.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.btn {
@apply leading-1 whitespace-nowrap select-none outline-none gap-[0.5em] relative transition-all;
@apply leading-[4px] whitespace-nowrap select-none outline-none gap-[0.5em] relative transition-all;
@extend .flex-middle;
@apply inline-flex;
img {
Expand All @@ -9,11 +9,11 @@

.btn-hover {
&:not(:disabled):not(.loading) {
@apply relative cursor-pointer z-1;
@apply relative cursor-pointer z-10;
&::after {
content: '';
@extend .absolute-full;
@apply bg-current opacity-0 -z-1;
@apply bg-current opacity-0 -z-10;
}
&.active::after, &:active::after {
@apply opacity-10;
Expand Down
8 changes: 4 additions & 4 deletions apps/events/scss/fontsizes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ h3,

h4,
.h4 {
@apply lg:text-xl md:text-lg text-md font-medium;
@apply lg:text-xl md:text-lg text-base font-medium;
}

h5,
.h5 {
@apply lg:text-lg text-md font-medium;
@apply lg:text-lg text-base font-medium;
}

h6, .h6 {
@apply lg:text-md md:text-base;
@apply lg:text-base md:text-base;
}

.subtitle {
@apply opacity-60 font-bold leading-1;
@apply opacity-60 font-bold leading-[4px];
}
224 changes: 148 additions & 76 deletions apps/events/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,86 @@
const colors = require("wasedatime-ui/colors");

module.exports = {
const config = {
darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./hoc/**/*.{js,ts,jsx,tsx,mdx}',
'./ui/**/*.{js,ts,jsx,tsx,mdx}'
],
theme: {
extend: {
textColors: colors,
colors,
colors: {
...colors,
"primary": "rgb(var(--primary), <alpha-value>)",
"primary-lighten": "rgb(var(--primary-lighten), <alpha-value>)",
"primary-dark": "rgb(var(--primary-dark), <alpha-value>)",
"ground": "rgb(var(--ground), <alpha-value>)",
"ground-light": "rgb(var(--ground-light), <alpha-value>)",
"surface": "rgb(var(--surface), <alpha-value>)",
"surface-light": "rgb(var(--surface-light), <alpha-value>)",
"surface-dark": "rgb(var(--surface-dark), <alpha-value>)",
"surface-1": "rgb(var(--surface-1), <alpha-value>)",
"surface-2": "rgb(var(--surface-2), <alpha-value>)",
"surface-3": "rgb(var(--surface-3), <alpha-value>)",
"surface-4": "rgb(var(--surface-4), <alpha-value>)",
"surface-5": "rgb(var(--surface-5), <alpha-value>)",
"surface-6": "rgb(var(--surface-6), <alpha-value>)",
"surface-7": "rgb(var(--surface-7), <alpha-value>)",
"surface-8": "rgb(var(--surface-8), <alpha-value>)",
"surface-9": "rgb(var(--surface-9), <alpha-value>)",
"surface-10": "rgb(var(--surface-10), <alpha-value>)",
"surface-11": "rgb(var(--surface-11), <alpha-value>)",
"accent-1": "rgb(var(--accent-1), <alpha-value>)",
"accent-2": "rgb(var(--accent-2), <alpha-value>)",
"accent-3": "rgb(var(--accent-3), <alpha-value>)",
"accent-4": "rgb(var(--accent-4), <alpha-value>)",
"accent-5": "rgb(var(--accent-5), <alpha-value>)",
"accent-6": "rgb(var(--accent-6), <alpha-value>)",
"accent-7": "rgb(var(--accent-7), <alpha-value>)",
"accent-8": "rgb(var(--accent-8), <alpha-value>)",
"accent-9": "rgb(var(--accent-9), <alpha-value>)",
"accent-10": "rgb(var(--accent-10), <alpha-value>)",
fontSize: {
'3xl': '2rem',
'2xl': '1.75rem',
'xl': '1.5rem',
'lg': '1.25rem',
'md': '1.125rem',
'xs': '0.625rem'
},
lineHeight: {
0: 0,
1: 1,
2: 1.25,
3: 1.5,
4: 2
},
zIndex: {
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9
},
boxShadow: {
1: "0.25rem 0 0.25rem 0 rgba(0, 0, 0, 0.25)",
2: "0.125rem 0.125rem 0.25rem 0.0625rem rgba(44, 44, 44, 0.07)",
3: "0.125rem 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.05);",
4: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.10);"
},
flex: {
1: 1,
2: 2
}

},
},
},
variants: {
Expand All @@ -18,84 +89,85 @@ module.exports = {
plugins: [],
};

export default config

// const config = {
// content: [
// './pages/**/*.{js,ts,jsx,tsx,mdx}',
// './components/**/*.{js,ts,jsx,tsx,mdx}',
// './app/**/*.{js,ts,jsx,tsx,mdx}',
// './hoc/**/*.{js,ts,jsx,tsx,mdx}',
// './ui/**/*.{js,ts,jsx,tsx,mdx}'
// ],
// content: [
// './pages/**/*.{js,ts,jsx,tsx,mdx}',
// './components/**/*.{js,ts,jsx,tsx,mdx}',
// './app/**/*.{js,ts,jsx,tsx,mdx}',
// './hoc/**/*.{js,ts,jsx,tsx,mdx}',
// './ui/**/*.{js,ts,jsx,tsx,mdx}'
// ],
// theme: {
// extend: {
// colors: {
// "primary": "rgb(var(--primary), <alpha-value>)",
// "primary-lighten": "rgb(var(--primary-lighten), <alpha-value>)",
// "primary-dark": "rgb(var(--primary-dark), <alpha-value>)",
// "ground": "rgb(var(--ground), <alpha-value>)",
// "ground-light": "rgb(var(--ground-light), <alpha-value>)",
// "surface": "rgb(var(--surface), <alpha-value>)",
// "surface-light": "rgb(var(--surface-light), <alpha-value>)",
// "surface-dark": "rgb(var(--surface-dark), <alpha-value>)",
// "surface-1": "rgb(var(--surface-1), <alpha-value>)",
// "surface-2": "rgb(var(--surface-2), <alpha-value>)",
// "surface-3": "rgb(var(--surface-3), <alpha-value>)",
// "surface-4": "rgb(var(--surface-4), <alpha-value>)",
// "surface-5": "rgb(var(--surface-5), <alpha-value>)",
// "surface-6": "rgb(var(--surface-6), <alpha-value>)",
// "surface-7": "rgb(var(--surface-7), <alpha-value>)",
// "surface-8": "rgb(var(--surface-8), <alpha-value>)",
// "surface-9": "rgb(var(--surface-9), <alpha-value>)",
// "surface-10": "rgb(var(--surface-10), <alpha-value>)",
// "surface-11": "rgb(var(--surface-11), <alpha-value>)",
// "accent-1": "rgb(var(--accent-1), <alpha-value>)",
// "accent-2": "rgb(var(--accent-2), <alpha-value>)",
// "accent-3": "rgb(var(--accent-3), <alpha-value>)",
// "accent-4": "rgb(var(--accent-4), <alpha-value>)",
// "accent-5": "rgb(var(--accent-5), <alpha-value>)",
// "accent-6": "rgb(var(--accent-6), <alpha-value>)",
// "accent-7": "rgb(var(--accent-7), <alpha-value>)",
// "accent-8": "rgb(var(--accent-8), <alpha-value>)",
// "accent-9": "rgb(var(--accent-9), <alpha-value>)",
// "accent-10": "rgb(var(--accent-10), <alpha-value>)",
// },
// fontSize: {
// '3xl': '2rem',
// '2xl': '1.75rem',
// 'xl': '1.5rem',
// 'lg': '1.25rem',
// 'md': '1.125rem',
// 'xs': '0.625rem'
// },
// lineHeight: {
// 0: 0,
// 1: 1,
// 2: 1.25,
// 3: 1.5,
// 4: 2
// },
// zIndex: {
// 1: 1,
// 2: 2,
// 3: 3,
// 4: 4,
// 5: 5,
// 6: 6,
// 7: 7,
// 8: 8,
// 9: 9
// },
// boxShadow: {
// 1: "0.25rem 0 0.25rem 0 rgba(0, 0, 0, 0.25)",
// 2: "0.125rem 0.125rem 0.25rem 0.0625rem rgba(44, 44, 44, 0.07)",
// 3: "0.125rem 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.05);",
// 4: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.10);"
// "primary": "rgb(var(--primary), <alpha-value>)",
// "primary-lighten": "rgb(var(--primary-lighten), <alpha-value>)",
// "primary-dark": "rgb(var(--primary-dark), <alpha-value>)",
// "ground": "rgb(var(--ground), <alpha-value>)",
// "ground-light": "rgb(var(--ground-light), <alpha-value>)",
// "surface": "rgb(var(--surface), <alpha-value>)",
// "surface-light": "rgb(var(--surface-light), <alpha-value>)",
// "surface-dark": "rgb(var(--surface-dark), <alpha-value>)",
// "surface-1": "rgb(var(--surface-1), <alpha-value>)",
// "surface-2": "rgb(var(--surface-2), <alpha-value>)",
// "surface-3": "rgb(var(--surface-3), <alpha-value>)",
// "surface-4": "rgb(var(--surface-4), <alpha-value>)",
// "surface-5": "rgb(var(--surface-5), <alpha-value>)",
// "surface-6": "rgb(var(--surface-6), <alpha-value>)",
// "surface-7": "rgb(var(--surface-7), <alpha-value>)",
// "surface-8": "rgb(var(--surface-8), <alpha-value>)",
// "surface-9": "rgb(var(--surface-9), <alpha-value>)",
// "surface-10": "rgb(var(--surface-10), <alpha-value>)",
// "surface-11": "rgb(var(--surface-11), <alpha-value>)",
// "accent-1": "rgb(var(--accent-1), <alpha-value>)",
// "accent-2": "rgb(var(--accent-2), <alpha-value>)",
// "accent-3": "rgb(var(--accent-3), <alpha-value>)",
// "accent-4": "rgb(var(--accent-4), <alpha-value>)",
// "accent-5": "rgb(var(--accent-5), <alpha-value>)",
// "accent-6": "rgb(var(--accent-6), <alpha-value>)",
// "accent-7": "rgb(var(--accent-7), <alpha-value>)",
// "accent-8": "rgb(var(--accent-8), <alpha-value>)",
// "accent-9": "rgb(var(--accent-9), <alpha-value>)",
// "accent-10": "rgb(var(--accent-10), <alpha-value>)",
// },
// flex: {
// 1: 1,
// 2: 2
// }
// fontSize: {
// '3xl': '2rem',
// '2xl': '1.75rem',
// 'xl': '1.5rem',
// 'lg': '1.25rem',
// 'md': '1.125rem',
// 'xs': '0.625rem'
// },
// lineHeight: {
// 0: 0,
// 1: 1,
// 2: 1.25,
// 3: 1.5,
// 4: 2
// },
// zIndex: {
// 1: 1,
// 2: 2,
// 3: 3,
// 4: 4,
// 5: 5,
// 6: 6,
// 7: 7,
// 8: 8,
// 9: 9
// },
// boxShadow: {
// 1: "0.25rem 0 0.25rem 0 rgba(0, 0, 0, 0.25)",
// 2: "0.125rem 0.125rem 0.25rem 0.0625rem rgba(44, 44, 44, 0.07)",
// 3: "0.125rem 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.05);",
// 4: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.10);"
// },
// flex: {
// 1: 1,
// 2: 2
// }
// },
// },
// important: true,
Expand Down
4 changes: 3 additions & 1 deletion apps/root/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { ThemeContext, ThemeProvider } from "@app/utils/theme-context"
const AboutUs = lazy(() => import("@app/components/aboutUs/AboutUs"))
const Home = lazy(() => import("@app/components/Home"))
const Feeds = lazy(() => import("@app/components/Feeds"))
const Events = lazy(() => import("@app/components/Events"))

const NotFound = () => {
useEffect(() => navigateToUrl("/"), [])
Expand Down Expand Up @@ -87,7 +88,8 @@ const AppRoutes = () => {
<Route element={<Redirect to="/courses/syllabus" />} path="/syllabus" />
<Route element={<></>} path="/forum" />
<Route element={<></>} path="/campus" />
{/* <Route element={<></>} path="/career" /> */}
<Route element={<></>} path="/career" />
<Route element={<Events/>} path="/events" />
<Route element={<NotFound />} path="*" />
</Routes>
)
Expand Down
57 changes: 57 additions & 0 deletions apps/root/src/components/Events.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from "react"

import { Header, LoadingSpinner } from "wasedatime-ui"
import { useTranslation } from "react-i18next"
import styled from "styled-components"

import { ThemeContext } from "@app/utils/theme-context"

const FeedsWrapper = styled.div`
display: flex;
flex-direction: column;
`

const HeaderWrapper = styled.div`
flex: 0 0 67px;
h2 {
font-size: 32px;
font-family: Lato, Yu Gothic Medium, Segoe UI;
}
`

const Events = () => {
const [feedsLoaded, setFeedsLoaded] = React.useState(false)
const { t, i18n } = useTranslation()
const { theme, setTheme } = React.useContext(ThemeContext)

// const feedsBasePath =
// import.meta.env.VITE_MF_FEEDS_BASE_PATH || "http://localhost:8083"

return (
<FeedsWrapper style={{ overflow: "hidden" }}>
<HeaderWrapper>
<Header
title={t("navigation.feeds")}
onInputChange={() => {}}
placeholder={t("search feeds placeholder")}
inputText=""
disabled
isBlur={false}
changeLang={(lng) => i18n.changeLanguage(lng)}
theme={theme}
setTheme={setTheme}
/>
</HeaderWrapper>
<div>
{!feedsLoaded && <LoadingSpinner theme="light" message="Loading..." />}
<iframe
src={`http://localhost:8085`}
style={{ width: "100%", height: "calc(100vh - 70px)" }}
onLoad={() => setFeedsLoaded(true)}
/>
</div>
</FeedsWrapper>
)
}

export default Events

0 comments on commit d02210e

Please sign in to comment.