@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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
+};

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

@@ -0,0 +1,98 @@
+// components/addOns/functional/blogSections/constants/blogFormPopUp.ts
+// Constants for hardcoded text in BlogFormPopUp.tsx, organized by purpose
+
+export const BLOG_FORM_POP_UP = {
+  // UI Text for BlogFormPopUp
+  UI: {
+    // Modal heading when editing
+    EDIT_MODAL_HEADING: "Edit Blog Post",
+    // Modal heading when adding
+    ADD_MODAL_HEADING: "Add New Blog Post",
+    // Label for title input
+    TITLE_LABEL: "Title",
+    // Placeholder for title input
+    TITLE_PLACEHOLDER: "Enter post title",
+    // Title character and word count template
+    TITLE_COUNT_TEXT: "${titleCharCount}/50 characters, ${titleWordCount} words",
+    // Label for author input
+    AUTHOR_LABEL: "Author",
+    // Label for description textarea
+    DESCRIPTION_LABEL: "Description",
+    // Placeholder for description textarea
+    DESCRIPTION_PLACEHOLDER: "Enter post description",
+    // Description character and word count template
+    DESCRIPTION_COUNT_TEXT: "${descriptionCharCount}/1500 characters, ${descriptionWordCount} words",
+    // ToggleButton text when keywords are shown
+    HIDE_KEYWORDS_BUTTON: "Hide Keywords",
+    // ToggleButton text when keywords are hidden
+    SHOW_KEYWORDS_BUTTON: "Show SEO Keywords",
+    // SEO keywords for form
+    SEO_KEYWORDS: [
+      "fitness training",
+      "gym workout plans",
+      "strength exercises",
+      "cardio routines",
+      "weight loss tips",
+      "muscle building",
+      "home workouts",
+      "personal trainer",
+      "fitness motivation",
+      "healthy lifestyle",
+      "gym equipment",
+      "bodybuilding tips",
+      "HIIT workouts",
+      "nutrition for fitness",
+      "exercise routines",
+    ],
+    // Aria-label for keyword list items
+    KEYWORD_ARIA: "Insert keyword: ${keyword}",
+    // Chatbot heading
+    CHATBOT_HEADING: "AI Chatbot is coming soon!",
+    // Chatbot input placeholder
+    CHATBOT_PLACEHOLDER: "Ask for suggestions...",
+    // Delete confirmation modal heading
+    DELETE_MODAL_HEADING: "Confirm Deletion",
+    // Delete confirmation message
+    DELETE_CONFIRMATION_TEXT: "Are you sure you want to delete the post "${postToDelete.title}"? This action cannot be undone.",
+    // System prompt for chatbot
+    CHATBOT_SYSTEM_PROMPT: "You are an AI assistant helping with blog writing and SEO optimization. You are aware of the current blog post's title: \"${formData.title}\", description: \"${formData.description}\", and the following SEO keywords: ${seoKeywords.join(', ')}. Provide suggestions to improve the blog post's SEO, such as keyword usage, content structure, or meta descriptions. Respond concisely and relevantly to user queries.",
+  },
+  // Button Text for BlogFormPopUp
+  BUTTONS: {
+    // UpdateButton text when loading
+    SAVING_BUTTON: "Saving...",
+    // UpdateButton text when editing
+    UPDATE_BUTTON: "Update",
+    // UpdateButton text when adding
+    SUBMIT_BUTTON: "Submit",
+    // CancelButton text
+    CANCEL_BUTTON: "Cancel",
+    // ChatToggleButton aria-label when open
+    CLOSE_CHATBOT_ARIA: "Close AI chatbot",
+    // ChatToggleButton aria-label when closed
+    OPEN_CHATBOT_ARIA: "Open AI chatbot",
+    // DeleteButton text when loading
+    DELETING_BUTTON: "Deleting...",
+    // DeleteButton text
+    DELETE_BUTTON: "Delete",
+  },
+  // Error Messages for BlogFormPopUp
+  ERRORS: {
+    // Error when textarea is not initialized
+    TEXTAREA_NOT_INITIALIZED: "Text area not initialized",
+    // Error when authentication is loading
+    AUTH_LOADING: "Authentication is still loading, please wait...",
+    // Error when not signed in
+    NOT_SIGNED_IN: "You must be signed in to create or edit a blog post",
+    // Warning when business title is missing
+    NO_BUSINESS_TITLE: "Business title not found; using username or default author name",
+    // Error for incomplete form
+    REQUIRED_FIELDS: "Please fill in all required fields",
+    // Error when delete fails
+    DELETE_FAILED: "Failed to delete blog post",
+    // Generic error for delete and submit
+    UNKNOWN_ERROR: "An unknown error occurred",
+    // Error when submit fails
+    SUBMIT_FAILED: "Failed to submit blog post",
+  },
+};

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

@@ -0,0 +1,23 @@
+// components/addOns/functional/blogSections/constants/blogList.ts
+// Constants for hardcoded text in BlogList.tsx, organized by purpose
+
+export const BLOG_LIST = {
+  // UI Text for BlogList
+  UI: {
+    // Card title
+    CARD_TITLE: "Latest Blog Posts",
+    // Card header description
+    CARD_DESCRIPTION: "Discover our latest tips and updates",
+    // Text when no blog posts exist
+    NO_POSTS_MESSAGE: "No blog posts yet. Check back soon for new updates!",
+  },
+  // Button Text for BlogList
+  BUTTONS: {}, // No buttons in JSX
+  // Error Messages for BlogList
+  ERRORS: {
+    // Error when fetch fails
+    FETCH_FAILED: "Failed to fetch blog posts",
+    // Generic error for fetch
+    UNKNOWN_ERROR: "An unknown error occurred",
+  },
+};

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

@@ -0,0 +1,16 @@
+// components/addOns/functional/blogSections/constants/blogSidebar.ts
+// Constants for hardcoded text in BlogSidebar.tsx, organized by purpose
+
+export const BLOG_SIDEBAR = {
+  // UI Text for BlogSidebar
+  UI: {
+    // Card title
+    CARD_TITLE: "Other Blog Posts",
+    // Text when no other posts exist
+    NO_POSTS_MESSAGE: "No other posts available.",
+  },
+  // Button Text for BlogSidebar
+  BUTTONS: {}, // No buttons in JSX
+  // Error Messages for BlogSidebar
+  ERRORS: {}, // No errors in JSX
+};