From 808c06149dcd25daddf5c0289fb596bb2a140339 Mon Sep 17 00:00:00 2001 From: Amateur0x1 Date: Fri, 16 Aug 2024 18:47:21 +0800 Subject: [PATCH] feat: fix task card and implement responsive design for the md-view --- pnpm-lock.yaml | 31 +++++++++++++- src/components/layout/MobileSidebar.tsx | 15 ------- src/components/md-renderer.tsx | 8 +++- src/pages/mytask/index.tsx | 3 +- src/pages/task/index.tsx | 56 ++++++++++++++++++++----- src/pages/task/task-item.tsx | 8 ++-- src/pages/tutorial/index.tsx | 12 +++--- src/pages/tutorial/md-view.tsx | 9 ++-- 8 files changed, 96 insertions(+), 46 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 47c9745..8e7f85d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -79,7 +79,10 @@ importers: version: 3.6.0 framer-motion: specifier: ^11.3.21 - version: 11.3.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 11.3.21(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + hamburger-react: + specifier: ^2.5.1 + version: 2.5.1(react@18.3.1) history: specifier: ^5.3.0 version: 5.3.0 @@ -1137,6 +1140,12 @@ packages: '@emotion/hash@0.9.2': resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + '@emotion/is-prop-valid@1.3.0': + resolution: {integrity: sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==} + + '@emotion/memoize@0.9.0': + resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} + '@esbuild/android-arm64@0.18.20': resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==} engines: {node: '>=12'} @@ -4161,6 +4170,11 @@ packages: h3@1.12.0: resolution: {integrity: sha512-Zi/CcNeWBXDrFNlV0hUBJQR9F7a96RjMeAZweW/ZWkR9fuXrMcvKnSA63f/zZ9l0GgQOZDVHGvXivNN9PWOwhA==} + hamburger-react@2.5.1: + resolution: {integrity: sha512-XlTIinYeYzLu76q4Vd9olwOJP0hFgAeZfJFX6tTT/ufTLhmOjI77CGFYIwGc6gcDeeT86660ZoKx3/L67vdZEw==} + peerDependencies: + react: ^16.8 || ^17 || ^18 + hard-rejection@2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} engines: {node: '>=6'} @@ -8312,6 +8326,14 @@ snapshots: '@emotion/hash@0.9.2': {} + '@emotion/is-prop-valid@1.3.0': + dependencies: + '@emotion/memoize': 0.9.0 + optional: true + + '@emotion/memoize@0.9.0': + optional: true + '@esbuild/android-arm64@0.18.20': optional: true @@ -11941,10 +11963,11 @@ snapshots: fraction.js@4.3.7: {} - framer-motion@11.3.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + framer-motion@11.3.21(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: tslib: 2.6.3 optionalDependencies: + '@emotion/is-prop-valid': 1.3.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -12109,6 +12132,10 @@ snapshots: transitivePeerDependencies: - uWebSockets.js + hamburger-react@2.5.1(react@18.3.1): + dependencies: + react: 18.3.1 + hard-rejection@2.1.0: {} has-bigints@1.0.2: {} diff --git a/src/components/layout/MobileSidebar.tsx b/src/components/layout/MobileSidebar.tsx index a25e385..74e7465 100644 --- a/src/components/layout/MobileSidebar.tsx +++ b/src/components/layout/MobileSidebar.tsx @@ -2,7 +2,6 @@ import { Link } from 'react-router-dom' import { Menu, Package2 } from 'lucide-react' import { Button } from '@/components/ui/button' -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' @@ -26,7 +25,6 @@ export default function MobileSidebar() { {navItems.map((item) => { if (item.hideInMenu) return null - const Icon = item.icon ? Icons[item.icon] : () => null return ( -
- - - Upgrade to Pro - Unlock all features and get unlimited access to our support team. - - - - - -
) diff --git a/src/components/md-renderer.tsx b/src/components/md-renderer.tsx index 07c3657..a7c92df 100644 --- a/src/components/md-renderer.tsx +++ b/src/components/md-renderer.tsx @@ -9,7 +9,11 @@ interface IMarkdownRendererProps extends React.HTMLAttributes { const MdRenderer = forwardRef(({ content, ...props }, ref) => { return (
-
+
) }) @@ -22,7 +26,7 @@ interface ITocSidebarProps extends React.HTMLAttributes { const TocSidebar = ({ toc, activeId, ...props }: ITocSidebarProps) => { return (