@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/functional/blogSections/BlogList.tsx

@@ -1,149 +1,149 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useRouter } from "next/navigation";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
-import { Calendar } from "lucide-react";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { BLOG_LIST } from "./constants/blogList"; 
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-export default function BlogList() {
-  const router = useRouter();
-  const [posts, setPosts] = useState<BlogPost[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isMobile, setIsMobile] = useState(false);
-  const hasFetched = useRef(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 640);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    if (hasFetched.current) return;
-    hasFetched.current = true;
-
-    const fetchPosts = async () => {
-      setIsLoading(true);
-      try {
-        const response = await fetch("/api/blog", {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || BLOG_LIST.ERRORS.FETCH_FAILED);
-        }
-        const { data } = await response.json();
-        const blogPosts = data.blogPosts.map((p: BlogPost) => ({
-          ...p,
-          publishedAt: new Date(p.publishedAt).toISOString(),
-        }));
-        setPosts(blogPosts);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : BLOG_LIST.ERRORS.UNKNOWN_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchPosts();
-  }, []);
-
-  const truncateText = (text: string, field: "title" | "description" | "authorDate"): string => {
-    const maxLength = isMobile ? (field === "authorDate" ? 30 : 20) : 50;
-    if (text.length <= maxLength) return text;
-    return text.slice(0, maxLength - 3) + "...";
-  };
-
-  if (isLoading) {
-    return (
-      <div className="py-8 text-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full bg-[#1E2A44] border-none outline-none z-0 px-0 py-8 sm:px-6 sm:py-16 md:p-8">
-      <style jsx>{`
-        .file-item {
-          z-index: 30;
-          pointer-events: auto;
-          cursor: pointer;
-        }
-      `}</style>
-      <section className="relative z-10">
-        <div className="w-full max-w-7xl mx-auto">
-          <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 text-white flex flex-col items-center space-y-6 bg-[#1E2A44] border-none rounded-none">
-            <CardHeader className="pb-4 text-center">
-              <CardTitle className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white">
-                {BLOG_LIST.UI.CARD_TITLE}
-              </CardTitle>
-              <p className="text-gray-300 text-base sm:text-lg md:text-xl">
-                {BLOG_LIST.UI.CARD_DESCRIPTION}
-              </p>
-            </CardHeader>
-            <CardContent className="w-full space-y-4">
-              {error && (
-                <p className="text-red-400 text-base sm:text-lg md:text-xl text-center">
-                  {error}
-                </p>
-              )}
-              {posts.length > 0 ? (
-                <div className="space-y-4 max-h-[400px] overflow-y-auto">
-                  {posts.map((post) => (
-                    <div
-                      key={post.id}
-                      className="file-item w-full flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 sm:p-4 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer"
-                      onClick={() => router.push(`/blog/${post.id}`)}
-                      role="link"
-                      aria-label={`View post: ${post.title}`}
-                    >
-                      <div className="flex flex-col w-full">
-                        <h4 className="font-bold text-base sm:text-lg md:text-xl text-white mb-1 truncate">
-                          {truncateText(post.title, "title")}
-                        </h4>
-                        <div className="flex items-center gap-2 text-sm text-gray-300">
-                          <Calendar className="h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0" />
-                          <span>
-                            {truncateText(
-                              `By ${post.author} | ${new Date(post.publishedAt).toLocaleDateString("en-US", {
-                                year: "numeric",
-                                month: "short",
-                                day: "numeric",
-                              })}`,
-                              "authorDate"
-                            )}
-                          </span>
-                        </div>
-                      </div>
-                      {/* <p className="text-sm text-gray-300 mt-2 sm:mt-0 sm:ml-4 w-full sm:w-auto flex-1 truncate">
-                        {truncateText(post.description, "description")}
-                      </p> */}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
-                  {BLOG_LIST.UI.NO_POSTS_MESSAGE}
-                </p>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-    </div>
-  );
+import React, { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
+import { Calendar } from "lucide-react";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { BLOG_LIST } from "./constants/blogList"; 
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+export default function BlogList() {
+  const router = useRouter();
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const hasFetched = useRef(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchPosts = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch("/api/blog", {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || BLOG_LIST.ERRORS.FETCH_FAILED);
+        }
+        const { data } = await response.json();
+        const blogPosts = data.blogPosts.map((p: BlogPost) => ({
+          ...p,
+          publishedAt: new Date(p.publishedAt).toISOString(),
+        }));
+        setPosts(blogPosts);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : BLOG_LIST.ERRORS.UNKNOWN_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchPosts();
+  }, []);
+
+  const truncateText = (text: string, field: "title" | "description" | "authorDate"): string => {
+    const maxLength = isMobile ? (field === "authorDate" ? 30 : 20) : 50;
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength - 3) + "...";
+  };
+
+  if (isLoading) {
+    return (
+      <div className="py-8 text-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full bg-[#1E2A44] border-none outline-none z-0 px-0 py-8 sm:px-6 sm:py-16 md:p-8">
+      <style jsx>{`
+        .file-item {
+          z-index: 30;
+          pointer-events: auto;
+          cursor: pointer;
+        }
+      `}</style>
+      <section className="relative z-10">
+        <div className="w-full max-w-7xl mx-auto">
+          <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 text-white flex flex-col items-center space-y-6 bg-[#1E2A44] border-none rounded-none">
+            <CardHeader className="pb-4 text-center">
+              <CardTitle className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white">
+                {BLOG_LIST.UI.CARD_TITLE}
+              </CardTitle>
+              <p className="text-gray-300 text-base sm:text-lg md:text-xl">
+                {BLOG_LIST.UI.CARD_DESCRIPTION}
+              </p>
+            </CardHeader>
+            <CardContent className="w-full space-y-4">
+              {error && (
+                <p className="text-red-400 text-base sm:text-lg md:text-xl text-center">
+                  {error}
+                </p>
+              )}
+              {posts.length > 0 ? (
+                <div className="space-y-4 max-h-[400px] overflow-y-auto">
+                  {posts.map((post) => (
+                    <div
+                      key={post.id}
+                      className="file-item w-full flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 sm:p-4 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer"
+                      onClick={() => router.push(`/blog/${post.id}`)}
+                      role="link"
+                      aria-label={`View post: ${post.title}`}
+                    >
+                      <div className="flex flex-col w-full">
+                        <h4 className="font-bold text-base sm:text-lg md:text-xl text-white mb-1 truncate">
+                          {truncateText(post.title, "title")}
+                        </h4>
+                        <div className="flex items-center gap-2 text-sm text-gray-300">
+                          <Calendar className="h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0" />
+                          <span>
+                            {truncateText(
+                              `By ${post.author} | ${new Date(post.publishedAt).toLocaleDateString("en-US", {
+                                year: "numeric",
+                                month: "short",
+                                day: "numeric",
+                              })}`,
+                              "authorDate"
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                      {/* <p className="text-sm text-gray-300 mt-2 sm:mt-0 sm:ml-4 w-full sm:w-auto flex-1 truncate">
+                        {truncateText(post.description, "description")}
+                      </p> */}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
+                  {BLOG_LIST.UI.NO_POSTS_MESSAGE}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </div>
+  );
 }

package/components/addOns/functional/blogSections/BlogSidebar.tsx

@@ -1,59 +1,59 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
-import { BLOG_SIDEBAR } from "./constants/blogSidebar";
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-interface BlogSidebarProps {
-  posts: BlogPost[];
-  currentPostId: number;
-}
-
-export default function BlogSidebar({ posts, currentPostId }: BlogSidebarProps) {
-  const otherPosts = posts
-    .filter((post) => post.id !== currentPostId)
-    .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
-    .slice(0, 5);
-
-  return (
-    <Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-      <CardHeader className="pb-4">
-        <CardTitle className="text-lg font-bold text-white">{BLOG_SIDEBAR.UI.CARD_TITLE}</CardTitle>
-      </CardHeader>
-      <CardContent className="p-6">
-        {otherPosts.length > 0 ? (
-          <ul className="space-y-4">
-            {otherPosts.map((post) => (
-              <li key={post.id}>
-                <Link href={`/blog/${post.id}`} className="text-gray-200 hover:text-blue-400 transition-colors">
-                  <span className="font-medium text-blue-300 block truncate">
-                    {post.title}
-                  </span>
-                  <div className="text-sm text-white">
-                    {new Date(post.publishedAt).toLocaleDateString("en-US", {
-                      year: "numeric",
-                      month: "long",
-                      day: "numeric",
-                    })}
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-gray-400 text-sm font-medium">{BLOG_SIDEBAR.UI.NO_POSTS_MESSAGE}</p>
-        )}
-      </CardContent>
-    </Card>
-  );
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/other/card";
+import { BLOG_SIDEBAR } from "./constants/blogSidebar";
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+interface BlogSidebarProps {
+  posts: BlogPost[];
+  currentPostId: number;
+}
+
+export default function BlogSidebar({ posts, currentPostId }: BlogSidebarProps) {
+  const otherPosts = posts
+    .filter((post) => post.id !== currentPostId)
+    .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
+    .slice(0, 5);
+
+  return (
+    <Card className="w-full max-w-xs min-h-[300px] rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+      <CardHeader className="pb-4">
+        <CardTitle className="text-lg font-bold text-white">{BLOG_SIDEBAR.UI.CARD_TITLE}</CardTitle>
+      </CardHeader>
+      <CardContent className="p-6">
+        {otherPosts.length > 0 ? (
+          <ul className="space-y-4">
+            {otherPosts.map((post) => (
+              <li key={post.id}>
+                <Link href={`/blog/${post.id}`} className="text-gray-200 hover:text-blue-400 transition-colors">
+                  <span className="font-medium text-blue-300 block truncate">
+                    {post.title}
+                  </span>
+                  <div className="text-sm text-white">
+                    {new Date(post.publishedAt).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                    })}
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-400 text-sm font-medium">{BLOG_SIDEBAR.UI.NO_POSTS_MESSAGE}</p>
+        )}
+      </CardContent>
+    </Card>
+  );
 }

package/components/addOns/functional/blogSections/constants/blogDashboard.ts

@@ -1,29 +1,29 @@
-// components/addOns/functional/blogSections/constants/blogDashboard.ts
-// Constants for hardcoded text in BlogDashboard.tsx, organized by purpose
-
-export const BLOG_DASHBOARD = {
-  // UI Text for BlogDashboard
-  UI: {
-    // Card title
-    CARD_TITLE: "Blog Posts",
-    // Card description
-    CARD_DESCRIPTION: "View and manage your recent blog posts",
-    // Success message for blog post submission
-    SUCCESS_MESSAGE: "Blog post submitted successfully!",
-    // Text when no blog posts exist
-    NO_POSTS_MESSAGE: "No blog posts yet",
-    // Subtext when no blog posts exist
-    NO_POSTS_SUBTEXT: "Submit your first blog post to get started",
-  },
-  // Button Text for BlogDashboard
-  BUTTONS: {
-    // AddButton text
-    ADD_BUTTON: "Add New Post",
-    // EditButton aria-label template
-    EDIT_BUTTON_ARIA: "Edit ${post.title}",
-    // TrashButton aria-label template
-    DELETE_BUTTON_ARIA: "Delete ${post.title}",
-  },
-  // Error Messages for BlogDashboard
-  ERRORS: {}, // No direct errors in JSX
+// components/addOns/functional/blogSections/constants/blogDashboard.ts
+// Constants for hardcoded text in BlogDashboard.tsx, organized by purpose
+
+export const BLOG_DASHBOARD = {
+  // UI Text for BlogDashboard
+  UI: {
+    // Card title
+    CARD_TITLE: "Blog Posts",
+    // Card description
+    CARD_DESCRIPTION: "View and manage your recent blog posts",
+    // Success message for blog post submission
+    SUCCESS_MESSAGE: "Blog post submitted successfully!",
+    // Text when no blog posts exist
+    NO_POSTS_MESSAGE: "No blog posts yet",
+    // Subtext when no blog posts exist
+    NO_POSTS_SUBTEXT: "Submit your first blog post to get started",
+  },
+  // Button Text for BlogDashboard
+  BUTTONS: {
+    // AddButton text
+    ADD_BUTTON: "Add New Post",
+    // EditButton aria-label template
+    EDIT_BUTTON_ARIA: "Edit ${post.title}",
+    // TrashButton aria-label template
+    DELETE_BUTTON_ARIA: "Delete ${post.title}",
+  },
+  // Error Messages for BlogDashboard
+  ERRORS: {}, // No direct errors in JSX
 };