Merge pull request #251 from daodaoedu/feat/my-island

feat: my classrooms page
daodaoedu · Jan 26, 2025 · 5419e93 · 5419e93
2 parents 4c60167 + e08bde9
commit 5419e93
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 67 deletions.
diff --git a/layout/ManageLayout.tsx b/layout/ManageLayout.tsx
@@ -1,80 +1,83 @@
 import { usePathname } from 'next/navigation';
 import Sidebar from '@/shared/components/Sidebar';
 import Collapse from '@/shared/components/Collapse';
+import Container from '@/shared/components/Container';
+import { ProtectedComponent } from '@/contexts/Auth';
 import DefaultLayout from './DefaultLayout';
 
 export default function ManageLayout({ children }: React.PropsWithChildren) {
   const pathname = usePathname();
 
   return (
     <DefaultLayout>
-      <div className="bg-primary-palest">
-        <div className="flex p-4 pt-5 pb-12 lg:pt-12 gap-10 max-w-6xl mx-auto min-h-screen-with-padding-top">
-          <div className="basis-80 hidden lg:block">
-            <Sidebar>
-              <Sidebar.Link href="/manage" isActive={pathname === '/manage'}>
-                我的小島
-              </Sidebar.Link>
-              <Sidebar.Link
-                href="/manage/projects"
-                isActive={pathname === '/manage/projects'}
-              >
-                我的學習計畫
-              </Sidebar.Link>
-              <Sidebar.Link
-                href="/personal-card/my-card"
-                isActive={pathname === '/personal-card/my-card'}
-              >
-                個人名片
-              </Sidebar.Link>
-              <Collapse>
-                <Sidebar.Item>
-                  <Collapse.Toggle className="w-full px-10 py-2" withIcon>
-                    百寶箱
-                  </Collapse.Toggle>
-                </Sidebar.Item>
-                <Collapse.List className="*:my-2 *:aria-hidden:my-0">
-                  <Collapse.Item>
-                    <Sidebar.Link
-                      className="pl-14"
-                      href="/manage/treasure"
-                      isDisabled
-                    >
-                      我的收藏
-                    </Sidebar.Link>
-                  </Collapse.Item>
-                  <Collapse.Item>
-                    <Sidebar.Link
-                      className="pl-14"
-                      href="/manage/treasure"
-                      isDisabled
-                    >
-                      我的足跡
-                    </Sidebar.Link>
-                  </Collapse.Item>
-                  <Collapse.Item>
-                    <Sidebar.Link
-                      className="pl-14"
-                      href="/manage/treasure"
-                      isDisabled
-                    >
-                      追蹤的夥伴
-                    </Sidebar.Link>
-                  </Collapse.Item>
-                </Collapse.List>
-              </Collapse>
-              <Sidebar.Link
-                href="/manage/classroom"
-                isActive={pathname === '/manage/classroom'}
-                isDisabled
-              >
-                我的教室
-              </Sidebar.Link>
-            </Sidebar>
-          </div>
-          <div className="flex-1">{children}</div>
+      <ProtectedComponent redirectOnCancel="/">
+        <div className="bg-primary-palest">
+          <Container className="flex px-4 pb-12 gap-10 max-w-6xl mx-auto" autoMinHeight>
+            <div className="basis-80 hidden lg:block">
+              <Sidebar>
+                <Sidebar.Link href="/manage" isActive={pathname === '/manage'}>
+                  我的小島
+                </Sidebar.Link>
+                <Sidebar.Link
+                  href="/manage/projects"
+                  isActive={pathname === '/manage/projects'}
+                >
+                  我的學習計畫
+                </Sidebar.Link>
+                <Sidebar.Link
+                  href="/personal-card/my-card"
+                  isActive={pathname === '/personal-card/my-card'}
+                >
+                  個人名片
+                </Sidebar.Link>
+                <Collapse>
+                  <Sidebar.Item>
+                    <Collapse.Toggle className="w-full px-10 py-2" withIcon>
+                      百寶箱
+                    </Collapse.Toggle>
+                  </Sidebar.Item>
+                  <Collapse.List className="*:my-2 *:aria-hidden:my-0">
+                    <Collapse.Item>
+                      <Sidebar.Link
+                        className="pl-14"
+                        href="/manage/treasure"
+                        isDisabled
+                      >
+                        我的收藏
+                      </Sidebar.Link>
+                    </Collapse.Item>
+                    <Collapse.Item>
+                      <Sidebar.Link
+                        className="pl-14"
+                        href="/manage/treasure"
+                        isDisabled
+                      >
+                        我的足跡
+                      </Sidebar.Link>
+                    </Collapse.Item>
+                    <Collapse.Item>
+                      <Sidebar.Link
+                        className="pl-14"
+                        href="/manage/treasure"
+                        isDisabled
+                      >
+                        追蹤的夥伴
+                      </Sidebar.Link>
+                    </Collapse.Item>
+                  </Collapse.List>
+                </Collapse>
+                <Sidebar.Link
+                  href="/manage/classrooms"
+                  isActive={pathname === '/manage/classrooms'}
+                >
+                  我的教室
+                </Sidebar.Link>
+              </Sidebar>
+            </div>
+            <div className="flex-1">{children}</div>
+          </Container>
         </div>
-      </div>
+      </ProtectedComponent>
     </DefaultLayout>
   );
 }
diff --git a/pages/manage/classrooms/index.tsx b/pages/manage/classrooms/index.tsx
@@ -0,0 +1,70 @@
+import { useRouter } from 'next/navigation';
+import Button from '@/shared/components/Button';
+import Container from '@/shared/components/Container';
+import Image from '@/shared/components/Image';
+
+const ClassCard = () => {
+  return (
+    <div className="bg-basic-white rounded-lg">
+      <div className="rounded-lg overflow-hidden">
+        <Image src="" alt="" />
+      </div>
+      <div className="pb-2.5 px-2.5">
+        <div className="mb-2.5 flex items-center justify-between">
+          <h2>學習馬拉松</h2>
+          <Button>...</Button>
+        </div>
+        <div className="mb-2.5 flex flex-col gap-0.5">
+          <div className="flex items-center gap-1.5">
+            <span>學生人數</span>|<span>5</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span>學習階段</span>|<span>高中</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span>課堂時間</span>|<span>2025/2/15~2024/6/13</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div className="grow">
+            <div className="w-1/2 h-2.5 rounded-full bg-primary-base" />
+          </div>
+          <div>50天</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Classrooms = () => {
+  const router = useRouter();
+
+  return (
+    <Container autoMinHeight>
+      <div className="px-4 mx-auto max-w-4xl">
+        <Button
+          size="sm"
+          className="px-0 mb-6"
+          prefixIcon="FaAngleLeft"
+          onClick={() => router.push('/manage')}
+        >
+          返回 我的小島
+        </Button>
+        <h1 className="mb-6 heading-md">我的教室</h1>
+        <ul className="grid grid-cols-3 gap-4">
+          <li>
+            <ClassCard />
+          </li>
+          <li>
+            <ClassCard />
+          </li>
+          <li>
+            <ClassCard />
+          </li>
+        </ul>
+      </div>
+    </Container>
+  );
+};
+
+export default Classrooms;
diff --git a/shared/components/Button.tsx b/shared/components/Button.tsx
@@ -1,5 +1,14 @@
 import { useRef } from 'react';
 import { cn } from '@/utils/cn';
+import dynamic from 'next/dynamic';
+
+const FaAngleLeft = dynamic(() =>
+  import('react-icons/fa6').then((mod) => mod.FaAngleLeft)
+);
+
+const icons = {
+  FaAngleLeft,
+};
 
 export enum ButtonColorEnum {
   Primary = 'primary',
@@ -33,6 +42,8 @@ export interface ButtonProps
   animation?: ButtonAnimationEnum | `${ButtonAnimationEnum}`;
   isDisabled?: boolean;
   isSubmit?: boolean;
+  prefixIcon?: keyof typeof icons;
+  suffixIcon?: keyof typeof icons;
 }
 
 function Button({
@@ -45,9 +56,13 @@ function Button({
   isDisabled = false,
   isSubmit = false,
   onClick,
+  prefixIcon,
+  suffixIcon,
   ...props
 }: ButtonProps) {
   const rippleRef = useRef<HTMLDivElement>(null);
+  const PrefixIcon = prefixIcon && icons[prefixIcon];
+  const SuffixIcon = suffixIcon && icons[suffixIcon];
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (animation === ButtonAnimationEnum.None) {
@@ -73,7 +88,8 @@ function Button({
     <button
       type={isSubmit ? 'submit' : 'button'}
       className={cn(
-        'relative overflow-hidden rounded-md',
+        'relative overflow-hidden rounded-md text-basic-400',
+        (prefixIcon || suffixIcon) && 'flex items-center gap-0.5',
         variant === ButtonVariantEnum.Solid && [
           'rounded-full transition-[box-shadow,color,background-color]',
           color === ButtonColorEnum.Primary &&
@@ -99,7 +115,13 @@ function Button({
       onClick={handleClick}
       {...props}
     >
+      {PrefixIcon && (
+        <PrefixIcon className={cn(size === ButtonSizeEnum.Small && 'size-4')} />
+      )}
       {children}
+      {SuffixIcon && (
+        <SuffixIcon className={cn(size === ButtonSizeEnum.Small && 'size-4')} />
+      )}
       {animation !== ButtonAnimationEnum.None && (
         <div ref={rippleRef} className="absolute inset-0 pointer-events-none" />
       )}

diff --git a/shared/components/Container.tsx b/shared/components/Container.tsx
@@ -0,0 +1,35 @@
+import { cn } from '@/utils/cn';
+
+export enum ContainerBackgroundColor {
+  PRIMARY_PALEST = 'bg-primary-palest',
+  WHITE = 'bg-basic-white',
+}
+
+interface ContainerProps {
+  className?: string;
+  backgroundColor?: ContainerBackgroundColor | `${ContainerBackgroundColor}`;
+  autoMinHeight?: boolean;
+  children: React.ReactNode;
+}
+
+function Container({
+  children,
+  className,
+  backgroundColor = 'bg-primary-palest',
+  autoMinHeight = false,
+}: ContainerProps) {
+  return (
+    <div
+      className={cn(
+        'pt-5 lg:pt-12',
+        autoMinHeight && 'min-h-screen-without-padding-top',
+        backgroundColor,
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Container;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -190,6 +190,9 @@ module.exports = {
       addUtilities({
         ['.min-h-screen-with-padding-top']: {
           paddingTop: 'var(--padding-top, 0px)',
+          minHeight: '100vh',
+        },
+        ['.min-h-screen-without-padding-top']: {
           minHeight: 'calc(100vh - var(--padding-top, 0px))',
         },
       });