Merge pull request #41 from ETLOnline/issue-31-spaces-screen

Issue 31 spaces screen

src/app/(dashboard)/posts/page.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { useState } from "react"
-import CreatePostForm from "@/src/components/dashboard/posts/create-post-form"
-import PostFeed from "@/src/components/dashboard/posts/post-feed"
+import PostFeed from "@/src/components/dashboard/post-feed"
 import {
   Post,
   PostFile,
-  PostPoll,
-} from "@/src/components/dashboard/posts/types/posts-types.d"
+  PostPoll
+} from "@/src/components/dashboard/Posts/types/posts-types"
+import CreatePostForm from "@/src/components/dashboard/create-post-form"
 
 const samplePosts: (Post | PostFile | PostPoll)[] = [
   {
@@ -22,11 +22,11 @@ const samplePosts: (Post | PostFile | PostPoll)[] = [
         id: "c1",
         author: { name: "Bob Smith", avatar: "/avatars/02.png" },
         content: "What's the book called?",
-        createdAt: "2023-04-15T11:30:00Z",
-      },
+        createdAt: "2023-04-15T11:30:00Z"
+      }
     ],
     hashtags: ["ArtificialIntelligence", "Reading"],
-    createdAt: "2023-04-15T10:30:00Z",
+    createdAt: "2023-04-15T10:30:00Z"
   },
   {
     id: "2",
@@ -37,7 +37,7 @@ const samplePosts: (Post | PostFile | PostPoll)[] = [
     likes: 32,
     comments: [],
     hashtags: ["CodingSetup", "WorkFromHome"],
-    createdAt: "2023-04-14T14:45:00Z",
+    createdAt: "2023-04-14T14:45:00Z"
   },
   {
     id: "3",
@@ -48,7 +48,7 @@ const samplePosts: (Post | PostFile | PostPoll)[] = [
     comments: [],
     hashtags: ["Programming", "DevLife"],
     createdAt: "2023-04-13T09:15:00Z",
-    options: ["Python", "JavaScript"],
+    options: ["Python", "JavaScript"]
   },
   {
     id: "4",
@@ -59,8 +59,8 @@ const samplePosts: (Post | PostFile | PostPoll)[] = [
     comments: [],
     hashtags: ["Programming", "DevLife"],
     createdAt: "2023-04-13T09:15:00Z",
-    fileName: "brain.exe",
-  },
+    fileName: "brain.exe"
+  }
 ]
 
 const Posts: React.FC = () => {

src/app/(dashboard)/spaces/layout.tsx

@@ -0,0 +1,20 @@
+import CategorySelection from "@/src/components/dashboard/Spaces/CategorySelection"
+import SpacesStats from "@/src/components/dashboard/Spaces/SpacesStats"
+
+const SpacesLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col space-y-4 w-full">
+      <section className="flex space-x-4 w-full sticky pt-[8px] top-0 bg-background z-10 h-[128px]">
+        <CategorySelection />
+      </section>
+      <div className="flex-grow flex justify-center items-start space-x-4">
+        <main className="grow space-y-4 post-feed">
+          {children}
+        </main>
+        <SpacesStats />
+      </div>
+    </div>
+  )
+}
+
+export default SpacesLayout

src/app/(dashboard)/spaces/page.tsx

@@ -1,10 +1,94 @@
-import { SpacesScreen } from '@/src/components/dashboard/Spaces'
-import React from 'react'
+"use client"
+
+import CreatePostForm from "@/src/components/dashboard/create-post-form"
+import PostFeed from "@/src/components/dashboard/post-feed"
+import {
+  Post,
+  PostFile,
+  PostPoll
+} from "@/src/components/dashboard/Posts/types/posts-types"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription
+} from "@/src/components/ui/card"
+import { useState } from "react"
+
+const samplePosts: (Post | PostFile | PostPoll)[] = [
+  {
+    id: "1",
+    author: { name: "Alice Johnson", avatar: "/avatars/01.png" },
+    content:
+      "Just finished a great book on AI! #ArtificialIntelligence #Reading",
+    type: "text",
+    likes: 15,
+    comments: [
+      {
+        id: "c1",
+        author: { name: "Bob Smith", avatar: "/avatars/02.png" },
+        content: "What's the book called?",
+        createdAt: "2023-04-15T11:30:00Z"
+      }
+    ],
+    hashtags: ["ArtificialIntelligence", "Reading"],
+    createdAt: "2023-04-15T10:30:00Z"
+  },
+  {
+    id: "2",
+    author: { name: "Bob Smith", avatar: "/avatars/02.png" },
+    content:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJkk-ipl11piZ92Mn50FEqLnJRF00-mcDRVg&s",
+    type: "image",
+    likes: 32,
+    comments: [],
+    hashtags: ["CodingSetup", "WorkFromHome"],
+    createdAt: "2023-04-14T14:45:00Z"
+  },
+  {
+    id: "3",
+    author: { name: "Charlie Brown", avatar: "/avatars/03.png" },
+    content: "What's your favorite programming language?",
+    type: "poll",
+    likes: 24,
+    comments: [],
+    hashtags: ["Programming", "DevLife"],
+    createdAt: "2023-04-13T09:15:00Z",
+    options: ["Python", "JavaScript"]
+  },
+  {
+    id: "4",
+    author: { name: "Charlie Brown", avatar: "/avatars/03.png" },
+    content: "",
+    type: "file",
+    likes: 24,
+    comments: [],
+    hashtags: ["Programming", "DevLife"],
+    createdAt: "2023-04-13T09:15:00Z",
+    fileName: "brain.exe"
+  }
+]
+
+const SpacesPage: React.FC = () => {
+  const [posts, setPosts] =
+    useState<(Post | PostFile | PostPoll)[]>(samplePosts)
+  const [activeCategory, setActiveCategory] = useState("All")
 
-const SpacesPage = () => {
   return (
-    <SpacesScreen />
+    <div className="container mx-auto space-y-8">
+      <CreatePostForm setPosts={setPosts} posts={posts} variant="spaces" />
+      <Card>
+        <CardHeader>
+          <CardTitle>Feed</CardTitle>
+          <CardDescription>Latest posts from {activeCategory}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PostFeed posts={posts} setPosts={setPosts} />
+        </CardContent>
+      </Card>
+    </div>
   )
 }
 
-export default SpacesPage
+export default SpacesPage

src/components/dashboard/Spaces/CategorySelection.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Card } from "../../ui/card"
+import { CardHeader } from "../../ui/card"
+import { CardTitle } from "../../ui/card"
+import { CardContent } from "../../ui/card"
+import { ScrollArea } from "../../ui/scroll-area"
+import { ScrollBar } from "../../ui/scroll-area"
+import { Button } from "../../ui/button"
+import { useState } from "react"
+
+const CategorySelection = () => {
+  const [categories, setCategories] = useState([
+    "All",
+    "Programming",
+    "AI & Machine Learning",
+    "Open Source",
+    "Web Development",
+    "Mobile Development",
+    "Data Science",
+    "DevOps",
+    "Cybersecurity",
+    "Blockchain",
+    "IoT"
+  ])
+  const [activeCategory, setActiveCategory] = useState("All")
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-2">
+        <CardTitle>Categories</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="w-full overflow-auto pb-3">
+          <div className="flex w-[100px] space-x-2 p-1">
+            {categories.map((category) => (
+              <Button
+                key={category}
+                variant={activeCategory === category ? "default" : "outline"}
+                onClick={() => setActiveCategory(category)}
+                className="flex-shrink-0"
+              >
+                {category}
+              </Button>
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CategorySelection

src/components/dashboard/Spaces/CommunityStatsCard.tsx

@@ -0,0 +1,31 @@
+import { Card, CardTitle, CardHeader, CardContent } from "../../ui/card"
+import { Stat } from "./types/spaces-types"
+
+type CommunityStatsProps = {
+  stats: Stat[]
+}
+
+const CommunityStatsCard: React.FC<CommunityStatsProps> = (props) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Community Stats</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {props.stats.map((stat: Stat) => (
+            <div className="flex justify-between items-center">
+              <span className="flex items-center">
+                {stat.icon}
+                {stat.name}
+              </span>
+              <span className="font-bold">{stat.amount}</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default CommunityStatsCard

src/components/dashboard/Spaces/SpacesStats.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import CommunityStatsCard from "./CommunityStatsCard"
+import TrendingTopicsCard from "./TrendingTopicsCard"
+import UpcomingEventsCard from "./UpcomingEventsCard"
+import { useDetectBreakpoint } from "@/src/hooks/useBreakpoint"
+import { MessageCircle, Users } from "lucide-react"
+import { Event, Topic, Stat } from "./types/spaces-types"
+
+const upcomingEvents: Event[] = [
+  { name: "TechConf 2023", date: "2023-09-15" },
+  { name: "AI Summit", date: "2023-10-02" },
+  { name: "DevOps Day", date: "2023-10-20" }
+]
+
+const trendingTopics: Topic[] = [
+  { name: "React Hooks", posts: 120 },
+  { name: "GPT-4", posts: 98 },
+  { name: "Kubernetes", posts: 85 },
+  { name: "Web3", posts: 72 },
+  { name: "Flutter", posts: 65 }
+]
+
+const stats: Stat[] = [
+  {
+    name: "Members",
+    amount: 100,
+    icon: <Users className="mr-2 h-4 w-4 text-primary" />
+  },
+  {
+    name: "Posts Today",
+    amount: 237,
+    icon: <MessageCircle className="mr-2 h-4 w-4 text-primary" />
+  },
+  {
+    name: "New Members (This Week)",
+    amount: 89,
+    icon: <Users className="mr-2 h-4 w-4 text-primary" />
+  }
+]
+
+const SpacesStats = () => {
+  const isMobileOrTab = useDetectBreakpoint(945)
+
+  return (
+    !isMobileOrTab && (
+      <aside className="space-y-4 space-info pt-[128px] mt-[-128px] sticky top-[16px]">
+          <TrendingTopicsCard topics={trendingTopics} />
+          <UpcomingEventsCard events={upcomingEvents} />
+          <CommunityStatsCard stats={stats} />
+      </aside>
+    )
+  )
+}
+
+export default SpacesStats

src/components/dashboard/Spaces/TrendingTopicsCard.tsx

@@ -0,0 +1,36 @@
+import { Card } from "../../ui/card"
+import { CardHeader } from "../../ui/card"
+import { CardTitle } from "../../ui/card"
+import { CardContent } from "../../ui/card"
+import { Badge } from "../../ui/badge"
+import { TrendingUp } from "lucide-react"
+import { Topic } from "./types/spaces-types"
+
+type TendingTopicProps = {
+  topics: Topic[]
+}
+
+const TrendingTopicsCard: React.FC<TendingTopicProps> = (props) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Trending Topics</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2">
+          {props.topics.map((topic: Topic, index) => (
+            <li key={index} className="flex justify-between items-center">
+              <span className="flex items-center">
+                <TrendingUp className="mr-2 h-4 w-4 text-primary" />
+                {topic.name}
+              </span>
+              <Badge variant="secondary">{topic.posts} posts</Badge>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default TrendingTopicsCard

src/components/dashboard/Spaces/UpcomingEventsCard.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "../../ui/badge"
+import { Calendar } from "../../ui/calendar"
+import { Card, CardHeader, CardTitle, CardContent } from "../../ui/card"
+import { Event } from "./types/spaces-types"
+
+type UpcomingEventsProps = {
+  events: Event[]
+}
+
+const UpcomingEventsCard: React.FC<UpcomingEventsProps> = (props) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Upcoming Events</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2">
+          {props.events.map((event: Event, index) => (
+            <li key={index} className="flex justify-between items-center">
+              <span>{event.name}</span>
+              <Badge variant="outline">
+                {/* <Calendar className="mr-1 h-3 w-3" /> */}
+                {event.date}
+              </Badge>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default UpcomingEventsCard