From 7380727efc50aacb3a2a8f65171e49498b56f4d6 Mon Sep 17 00:00:00 2001 From: ahaapple Date: Mon, 23 Dec 2024 20:47:30 +0800 Subject: [PATCH] Add memfree roadmap page --- .../(marketing)/roadmap/client-wapper.tsx | 358 ++++++++++++++++++ .../app/[locale]/(marketing)/roadmap/page.tsx | 14 + 2 files changed, 372 insertions(+) create mode 100644 frontend/app/[locale]/(marketing)/roadmap/client-wapper.tsx create mode 100644 frontend/app/[locale]/(marketing)/roadmap/page.tsx diff --git a/frontend/app/[locale]/(marketing)/roadmap/client-wapper.tsx b/frontend/app/[locale]/(marketing)/roadmap/client-wapper.tsx new file mode 100644 index 00000000..8548b356 --- /dev/null +++ b/frontend/app/[locale]/(marketing)/roadmap/client-wapper.tsx @@ -0,0 +1,358 @@ +// @ts-nocheck +'use client'; + +import { useState } from 'react'; +import { Card } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Progress } from '@/components/ui/progress'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { ArrowUpIcon, MessageSquare, Paperclip, Calendar, Tag } from 'lucide-react'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import Link from 'next/link'; + +const jsondata = { + labels: { + productRoadmap: 'MemFree Roadmap', + trackProgress: 'All-in-One AI Assistant for Indie Makers and Developers', + inReview: 'In Review', + inProgress: 'In Progress', + completed: 'Completed', + priority: 'Priority', + date: 'Date', + allPriority: 'All Priority', + high: 'High', + medium: 'Medium', + low: 'Low', + allTime: 'All Time', + today: 'Today', + thisWeek: 'This Week', + thisMonth: 'This Month', + description: 'Description', + progress: 'Progress', + details: 'Details', + tags: 'Tags', + assignee: 'Assignee', + }, + tasks: [ + { + id: '1', + title: 'AI SEO Creator', + description: 'Use AI to automatically create a large number of SEO optimized pages', + date: '2024-02-20', + status: 'review', + priority: 'medium', + votes: 22, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI SEO', 'AI Write'], + comments: 4, + attachments: 2, + progress: 75, + }, + { + id: '2', + title: 'AI Image Generator', + description: 'One Click Generate Image with AI from text and images', + date: '2024-12-23', + status: 'progress', + priority: 'medium', + votes: 12, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI Image'], + comments: 3, + attachments: 2, + progress: 35, + }, + { + id: '3', + title: 'AI Tools Store', + description: 'Supports AI productivity tools commonly used by Indie Makers and Developers', + date: '2024-12-10', + status: 'progress', + priority: 'medium', + votes: 15, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI Tools', 'AI Store'], + comments: 5, + attachments: 1, + progress: 40, + }, + { + id: '4', + title: 'AI Coding', + description: 'Improve development efficiency 10 times with AI', + date: '2024-12-20', + status: 'progress', + priority: 'medium', + votes: 20, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI Coding'], + comments: 7, + attachments: 4, + progress: 65, + }, + { + id: '5', + title: 'AI Search', + description: 'Search and ask Anything from internet and your knowledge base', + date: '2024-07-23', + status: 'completed', + priority: 'low', + votes: 8, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI Search', 'AI Ask', 'AI Sumary'], + comments: 2, + attachments: 1, + progress: 100, + }, + { + id: '6', + title: 'AI Chatbot', + description: 'Chat with Multi AI Models to get answers to your questions', + date: '2024-06-28', + status: 'completed', + priority: 'low', + votes: 8, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI Chat', 'AI Write', 'AI Talk'], + comments: 2, + attachments: 1, + progress: 100, + }, + { + id: '7', + title: 'AI Page Generator', + description: 'Generate pages with AI from text, screenshots, and templates', + date: '2024-10-08', + status: 'completed', + priority: 'low', + votes: 8, + assignee: { name: 'Kade Sen', avatar: 'https://image.memfree.me/1734953025361-kensen.avif' }, + tags: ['AI UI', 'AI Coding', 'AI Design'], + comments: 2, + attachments: 1, + progress: 100, + }, + ], +}; + +export default function RoadmapPage({ data = jsondata }) { + const [selectedTask, setSelectedTask] = useState(null); + const [votedTasks, setVotedTasks] = useState>(new Set()); + const handleVote = (taskId: string) => { + if (!votedTasks.has(taskId)) { + setVotedTasks(new Set([...votedTasks, taskId])); + } + }; + + const filterTasksByStatus = (status: string) => { + return data.tasks.filter((task) => { + if (task.status !== status) return false; + return true; + }); + }; + + const TaskCard = ({ task }: { task: Task }) => ( + +
+

setSelectedTask(task)}> + {task.title} +

+ +
+ +

{task.description}

+ +
+ + + {task.assignee.name[0]} + + + {task.progress}% +
+ +
+ {task.tags.map((tag) => ( + + {tag} + + ))} +
+ +
+
+ + + {task.comments} + + + + {task.attachments} + +
+ {task.date} +
+ + ); + + const TaskColumn = ({ title, status }: { title: string; status: string }) => ( +
+
+
+

{title}

+ {filterTasksByStatus(status).length} +
+
+
+ {filterTasksByStatus(status).map((task) => ( + + ))} +
+
+ ); + + return ( +
+
+
+
+
+
+

{data.labels.productRoadmap}

+

{data.labels.trackProgress}

+
+
+
+ +
+ + + +
+
+ + setSelectedTask(null)}> + {selectedTask && ( + + + {selectedTask.title} + + +
+
+ {selectedTask.status} + {selectedTask.priority} +
+ +
+ + + {selectedTask.assignee.name[0]} + +
+

{selectedTask.assignee.name}

+

{data.labels.assignee}

+
+
+ +
+
+

{data.labels.description}

+

{selectedTask.description}

+
+ +
+

{data.labels.progress}

+ + {selectedTask.progress}% completed +
+ +
+

{data.labels.details}

+
+
+ + {selectedTask.date} +
+
+ + {selectedTask.comments} comments +
+
+ + {selectedTask.attachments} attachments +
+
+ + {selectedTask.tags.length} tags +
+
+
+ +
+

{data.labels.tags}

+
+ {selectedTask.tags.map((tag) => ( + + {tag} + + ))} +
+
+
+
+ + )} + + +

+ Built With{' '} + + PageGen + +

+
+
+ ); +} + +const getStatusColor = (status: string) => { + switch (status) { + case 'review': + return 'bg-purple-100 text-purple-800'; + case 'progress': + return 'bg-blue-100 text-blue-800'; + case 'completed': + return 'bg-green-100 text-green-800'; + default: + return 'bg-gray-100 text-gray-800'; + } +}; + +const getPriorityColor = (priority: string) => { + switch (priority) { + case 'high': + return 'bg-red-100 text-red-800'; + case 'medium': + return 'bg-yellow-100 text-yellow-800'; + case 'low': + return 'bg-green-100 text-green-800'; + default: + return 'bg-gray-100 text-gray-800'; + } +}; diff --git a/frontend/app/[locale]/(marketing)/roadmap/page.tsx b/frontend/app/[locale]/(marketing)/roadmap/page.tsx new file mode 100644 index 00000000..c179bd52 --- /dev/null +++ b/frontend/app/[locale]/(marketing)/roadmap/page.tsx @@ -0,0 +1,14 @@ +import RoadmapPage from '@/app/[locale]/(marketing)/roadmap/client-wapper'; +import { siteConfig } from '@/config'; + +export const metadata = { + title: 'MemFree Roadmap -- All-in-One AI Assistant for Indie Makers', + description: 'MemFree Roadmap -- All-in-One AI Assistant for Indie Makers', + alternates: { + canonical: siteConfig.url + '/changelog', + }, +}; + +export default function Roadmap() { + return ; +}