From d02210e2759bf623977e9f7b00eff9870b3be229 Mon Sep 17 00:00:00 2001 From: Jason Park Date: Fri, 15 Dec 2023 12:24:35 +0900 Subject: [PATCH] feat: events page but with many errors --- apps/events/app/page.tsx | 2 +- apps/events/next.config.js | 2 +- apps/events/package.json | 2 +- apps/events/scss/btns-main.scss | 6 +- apps/events/scss/fontsizes.scss | 8 +- apps/events/tailwind.config.ts | 224 ++++++++++++++++++---------- apps/root/src/App.tsx | 4 +- apps/root/src/components/Events.tsx | 57 +++++++ 8 files changed, 218 insertions(+), 87 deletions(-) create mode 100644 apps/root/src/components/Events.tsx diff --git a/apps/events/app/page.tsx b/apps/events/app/page.tsx index 11315664..508a45de 100644 --- a/apps/events/app/page.tsx +++ b/apps/events/app/page.tsx @@ -9,7 +9,7 @@ export default function Home() { return (
- + My Page
diff --git a/apps/events/next.config.js b/apps/events/next.config.js index eaf28f3d..6c0adaee 100644 --- a/apps/events/next.config.js +++ b/apps/events/next.config.js @@ -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" }, diff --git a/apps/events/package.json b/apps/events/package.json index 0fb7616d..f3db3f55 100644 --- a/apps/events/package.json +++ b/apps/events/package.json @@ -1,5 +1,5 @@ { - "name": "wasedatiem-events", + "name": "wasedatime-events", "version": "0.1.0", "private": true, "scripts": { diff --git a/apps/events/scss/btns-main.scss b/apps/events/scss/btns-main.scss index 67290c56..0bb12d2a 100644 --- a/apps/events/scss/btns-main.scss +++ b/apps/events/scss/btns-main.scss @@ -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 { @@ -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; diff --git a/apps/events/scss/fontsizes.scss b/apps/events/scss/fontsizes.scss index 80e8cb8a..df6f92d1 100644 --- a/apps/events/scss/fontsizes.scss +++ b/apps/events/scss/fontsizes.scss @@ -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]; } \ No newline at end of file diff --git a/apps/events/tailwind.config.ts b/apps/events/tailwind.config.ts index 94985523..50b3e82d 100644 --- a/apps/events/tailwind.config.ts +++ b/apps/events/tailwind.config.ts @@ -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), )", + "primary-lighten": "rgb(var(--primary-lighten), )", + "primary-dark": "rgb(var(--primary-dark), )", + "ground": "rgb(var(--ground), )", + "ground-light": "rgb(var(--ground-light), )", + "surface": "rgb(var(--surface), )", + "surface-light": "rgb(var(--surface-light), )", + "surface-dark": "rgb(var(--surface-dark), )", + "surface-1": "rgb(var(--surface-1), )", + "surface-2": "rgb(var(--surface-2), )", + "surface-3": "rgb(var(--surface-3), )", + "surface-4": "rgb(var(--surface-4), )", + "surface-5": "rgb(var(--surface-5), )", + "surface-6": "rgb(var(--surface-6), )", + "surface-7": "rgb(var(--surface-7), )", + "surface-8": "rgb(var(--surface-8), )", + "surface-9": "rgb(var(--surface-9), )", + "surface-10": "rgb(var(--surface-10), )", + "surface-11": "rgb(var(--surface-11), )", + "accent-1": "rgb(var(--accent-1), )", + "accent-2": "rgb(var(--accent-2), )", + "accent-3": "rgb(var(--accent-3), )", + "accent-4": "rgb(var(--accent-4), )", + "accent-5": "rgb(var(--accent-5), )", + "accent-6": "rgb(var(--accent-6), )", + "accent-7": "rgb(var(--accent-7), )", + "accent-8": "rgb(var(--accent-8), )", + "accent-9": "rgb(var(--accent-9), )", + "accent-10": "rgb(var(--accent-10), )", + 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: { @@ -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), )", -// "primary-lighten": "rgb(var(--primary-lighten), )", -// "primary-dark": "rgb(var(--primary-dark), )", -// "ground": "rgb(var(--ground), )", -// "ground-light": "rgb(var(--ground-light), )", -// "surface": "rgb(var(--surface), )", -// "surface-light": "rgb(var(--surface-light), )", -// "surface-dark": "rgb(var(--surface-dark), )", -// "surface-1": "rgb(var(--surface-1), )", -// "surface-2": "rgb(var(--surface-2), )", -// "surface-3": "rgb(var(--surface-3), )", -// "surface-4": "rgb(var(--surface-4), )", -// "surface-5": "rgb(var(--surface-5), )", -// "surface-6": "rgb(var(--surface-6), )", -// "surface-7": "rgb(var(--surface-7), )", -// "surface-8": "rgb(var(--surface-8), )", -// "surface-9": "rgb(var(--surface-9), )", -// "surface-10": "rgb(var(--surface-10), )", -// "surface-11": "rgb(var(--surface-11), )", -// "accent-1": "rgb(var(--accent-1), )", -// "accent-2": "rgb(var(--accent-2), )", -// "accent-3": "rgb(var(--accent-3), )", -// "accent-4": "rgb(var(--accent-4), )", -// "accent-5": "rgb(var(--accent-5), )", -// "accent-6": "rgb(var(--accent-6), )", -// "accent-7": "rgb(var(--accent-7), )", -// "accent-8": "rgb(var(--accent-8), )", -// "accent-9": "rgb(var(--accent-9), )", -// "accent-10": "rgb(var(--accent-10), )", -// }, -// 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), )", + // "primary-lighten": "rgb(var(--primary-lighten), )", + // "primary-dark": "rgb(var(--primary-dark), )", + // "ground": "rgb(var(--ground), )", + // "ground-light": "rgb(var(--ground-light), )", + // "surface": "rgb(var(--surface), )", + // "surface-light": "rgb(var(--surface-light), )", + // "surface-dark": "rgb(var(--surface-dark), )", + // "surface-1": "rgb(var(--surface-1), )", + // "surface-2": "rgb(var(--surface-2), )", + // "surface-3": "rgb(var(--surface-3), )", + // "surface-4": "rgb(var(--surface-4), )", + // "surface-5": "rgb(var(--surface-5), )", + // "surface-6": "rgb(var(--surface-6), )", + // "surface-7": "rgb(var(--surface-7), )", + // "surface-8": "rgb(var(--surface-8), )", + // "surface-9": "rgb(var(--surface-9), )", + // "surface-10": "rgb(var(--surface-10), )", + // "surface-11": "rgb(var(--surface-11), )", + // "accent-1": "rgb(var(--accent-1), )", + // "accent-2": "rgb(var(--accent-2), )", + // "accent-3": "rgb(var(--accent-3), )", + // "accent-4": "rgb(var(--accent-4), )", + // "accent-5": "rgb(var(--accent-5), )", + // "accent-6": "rgb(var(--accent-6), )", + // "accent-7": "rgb(var(--accent-7), )", + // "accent-8": "rgb(var(--accent-8), )", + // "accent-9": "rgb(var(--accent-9), )", + // "accent-10": "rgb(var(--accent-10), )", // }, -// 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, diff --git a/apps/root/src/App.tsx b/apps/root/src/App.tsx index c8b539bb..145e0475 100644 --- a/apps/root/src/App.tsx +++ b/apps/root/src/App.tsx @@ -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("/"), []) @@ -87,7 +88,8 @@ const AppRoutes = () => { } path="/syllabus" /> } path="/forum" /> } path="/campus" /> - {/* } path="/career" /> */} + } path="/career" /> + } path="/events" /> } path="*" /> ) diff --git a/apps/root/src/components/Events.tsx b/apps/root/src/components/Events.tsx new file mode 100644 index 00000000..9e9e8299 --- /dev/null +++ b/apps/root/src/components/Events.tsx @@ -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 ( + + +
{}} + placeholder={t("search feeds placeholder")} + inputText="" + disabled + isBlur={false} + changeLang={(lng) => i18n.changeLanguage(lng)} + theme={theme} + setTheme={setTheme} + /> + +
+ {!feedsLoaded && } +