Merge pull request #35 from YoubetDao/feat/fix-task-card

feat: fix task card and implement responsive design for the md view

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() {
           </Link>
           {navItems.map((item) => {
             if (item.hideInMenu) return null
-
             const Icon = item.icon ? Icons[item.icon] : () => null
             return (
               <Link
@@ -40,19 +38,6 @@ export default function MobileSidebar() {
             )
           })}
         </nav>
-        <div className="mt-auto">
-          <Card>
-            <CardHeader>
-              <CardTitle>Upgrade to Pro</CardTitle>
-              <CardDescription>Unlock all features and get unlimited access to our support team.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Button size="sm" className="w-full">
-                Upgrade
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
       </SheetContent>
     </Sheet>
   )

src/components/md-renderer.tsx

@@ -9,7 +9,11 @@ interface IMarkdownRendererProps extends React.HTMLAttributes<HTMLElement> {
 const MdRenderer = forwardRef<HTMLElement, IMarkdownRendererProps>(({ content, ...props }, ref) => {
   return (
     <div {...props}>
-      <article ref={ref} {...props} className="prose dark:prose-invert" dangerouslySetInnerHTML={{ __html: content }} />
+      <article
+        ref={ref}
+        className="prose dark:prose-invert max-w-none full-width-article"
+        dangerouslySetInnerHTML={{ __html: content }}
+      />
     </div>
   )
 })
@@ -22,7 +26,7 @@ interface ITocSidebarProps extends React.HTMLAttributes<HTMLElement> {
 const TocSidebar = ({ toc, activeId, ...props }: ITocSidebarProps) => {
   return (
     <aside {...props}>
-      <ul className="space-y-1 border-l gradient-border pl-4">
+      <ul className="space-y-1">
         {toc.map(({ id, title, slug }) => (
           <li key={title} className={`${id} toc-item ${activeId === slug ? 'active' : ''}`}>
             <a href={`#${slug}`}>{title}</a>

src/pages/mytask/index.tsx

@@ -55,8 +55,7 @@ export default function MyTask() {
   }, [project, username])
 
   return (
-    <div className="space-y-4">
-      <h1>My Task</h1>
+    <div className="px-4 py-4 mx-auto max-w-7xl lg:px-12">
       <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
         {loading ? (
           <SkeletonTasks />

src/pages/task/index.tsx

@@ -14,6 +14,9 @@ import http from '@/service/instance'
 import { NetworkType, SDK } from 'youbet-sdk'
 import { TaskItem } from './task-item'
 import { EmptyTasks } from './empty-task'
+import { Input } from '@/components/ui/input'
+import { LucideSearch } from 'lucide-react'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 
 const sdk = new SDK({
   networkType: NetworkType.Testnet, // or NetworkType.Testnet
@@ -36,6 +39,8 @@ export default function TaskPage() {
   const [tasks, setTasks] = useState<Task[]>([])
   const [loading, setLoading] = useState(false)
   const { project } = useParams<{ project: string }>()
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+  const [all, setAll] = useState<string>('All')
 
   const fetchTasks = async () => {
     setLoading(true)
@@ -51,6 +56,24 @@ export default function TaskPage() {
     fetchTasks()
   }, [project])
 
+  const handleCategoryChange = (value: string[]) => {
+    if (value.length) {
+      setAll('')
+    } else {
+      setAll('All')
+    }
+    setSelectedCategories(value)
+  }
+
+  const handleSelectAll = (value: string) => {
+    if (value) {
+      setSelectedCategories([])
+      setAll(value)
+    } else {
+      setAll('')
+    }
+  }
+
   const handleClaim = async (item: Task) => {
     const issueNumber = item.htmlUrl.split('/').pop()
     try {
@@ -83,7 +106,7 @@ export default function TaskPage() {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="px-4 py-4 mx-auto max-w-7xl lg:px-12">
       <Breadcrumb className="py-2">
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -101,17 +124,27 @@ export default function TaskPage() {
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
-      <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-        {loading ? (
-          <SkeletonTasks />
-        ) : tasks.length ? (
-          tasks.map((item) => (
-            // TODO: key should not be htmlUrl; but title is not unique.
-            <TaskItem key={item.htmlUrl} item={item} onClaim={handleClaim} onDisclaim={handleDisclaim} />
-          ))
-        ) : (
-          <EmptyTasks />
-        )}
+      <div className="gap-5 flex flex-col">
+        <div className="relative">
+          <Input placeholder="Search tutorial title or description" className="pl-8 bg-background/80" />
+          <LucideSearch className="absolute w-4 h-4 -translate-y-1/2 top-1/2 left-2" />
+        </div>
+        <div className="flex space-x-2">
+          <ToggleGroup size="sm" type="single" value={all} onValueChange={handleSelectAll}>
+            <ToggleGroupItem value="All">All</ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+          {loading ? (
+            <SkeletonTasks />
+          ) : tasks.length ? (
+            tasks.map((item) => (
+              <TaskItem key={item.title} item={item} onClaim={handleClaim} onDisclaim={handleDisclaim} />
+            ))
+          ) : (
+            <EmptyTasks />
+          )}
+        </div>
       </div>
     </div>
   )

src/pages/task/task-item.tsx

@@ -36,7 +36,7 @@ export const TaskItem = ({
   return (
     <article className="rounded-2xl border group z-[1] duration-200 ease-in hover:border hover:border-opacity-80 hover:bg-white/10 relative w-full p-4 transition-all hover:scale-[0.998]">
       <div className="flex items-center justify-between gap-4">
-        <div className="flex flex-row items-center gap-3">
+        <div className="flex flex-row items-center justify-start gap-3 w-full">
           {item.state === 'open' ? (
             <CircleDot className="w-6 h-6 text-green-600" />
           ) : (
@@ -45,11 +45,9 @@ export const TaskItem = ({
           <Button
             asChild
             variant="link"
-            className="text-gray-50 !p-0 overflow-hidden text-2xl font-bold whitespace-nowrap text-ellipsis"
+            className="w-full !p-0 block text-gray-50 text-2xl font-bold whitespace-nowrap text-ellipsis overflow-hidden"
           >
-            <a href={item.htmlUrl} target="_blank" rel="noreferrer">
-              {item.title}
-            </a>
+            <a href={item.htmlUrl}>{item.title}</a>
           </Button>
         </div>
       </div>

src/pages/tutorial/index.tsx

@@ -4,17 +4,17 @@ const content = `
 ## 2. 文本格式
 你可以使用 **粗体**、*斜体*、~~删除线~~、以及 \`行内代码\` 来增强文本表现力。例如：
 
-**这是粗体文本**  
-*这是斜体文本*  
-~~这是删除线文本~~  
+**这是粗体文本**
+*这是斜体文本*
+~~这是删除线文本~~
 \`这是行内代码\`
 
 ### 2.1 段落和换行
 Markdown 通过空行来区分段落，使用两个空格加回车键来进行强制换行。
 
 例如：
 
-这是第一段。  
+这是第一段。
 这是第二段。
 
 ## 3. 列表
@@ -38,7 +38,7 @@ Markdown 支持有序列表和无序列表：
 你可以使用 \` >
   \` 来创建引用块。
 
-> 这是一个引用块  
+> 这是一个引用块
 > 你可以在这里引用他人的话或参考资料。
 
 ## 5. 链接和图片
@@ -94,7 +94,7 @@ Markdown 支持任务列表，可以用于显示待办事项或进度跟踪。
 
 const Tutorial = () => {
   return (
-    <div className="flex w-full">
+    <div className="px-4 py-4 mx-auto max-w-7xl lg:px-12">
       <MdView content={content} />
     </div>
   )

src/pages/tutorial/md-view.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useMd } from '@/components/md-renderer'
+
 interface IMarkdownRendererProps {
   content: string
 }
@@ -8,9 +9,11 @@ const MdView = ({ content }: IMarkdownRendererProps) => {
   const { MdRenderer, TocSidebar } = useMd(content, true)
 
   return (
-    <div className="flex w-full justify-center">
-      {MdRenderer && <MdRenderer className="w-[752px]" />}
-      {TocSidebar && <TocSidebar className="hidden lg:block sticky top-0 h-screen overflow-y-auto px-8 w-[312px]" />}
+    <div className="flex flex-col-reverse w-full gap-10 xl:flex-row">
+      {MdRenderer && <MdRenderer className="max-w-[1024px]" />}
+      {TocSidebar && (
+        <TocSidebar className="block xl:sticky top-0 overflow-y-auto h-full max-w-[312px] xl:border-l xl:border-muted pl-4" />
+      )}
     </div>
   )
 }