Merge pull request #19 from JoelVR17/feat/help-center

Feat/help center

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -20,6 +21,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "lucide-react": "^0.473.0",
     "next": "15.1.5",
     "next-themes": "^0.4.4",

src/app/help-center/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import HelpCenter from "@/components/modules/helpCenter/HelpCenter";
+
+const HelpCenterPage = () => {
+  return <HelpCenter />;
+};
+
+export default HelpCenterPage;

src/app/layout.tsx

@@ -30,13 +30,15 @@ export default function RootLayout({
         className={`${inter.className} ${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <SidebarProvider>
+            <div className="flex min-h-screen flex-col w-full">
           <SidebarProvider className="block">
             <div className="flex min-h-screen flex-col">
               <div className="flex flex-1">
                 <AdminSidebar />
                 <SidebarInset className="flex flex-col overflow-hidden">
                   <Header />
-                  <main className="flex-1">{children}</main>
+                  <div className="flex-1">{children}</div>
                   <Footer />
                 </SidebarInset>
               </div>

src/components/modules/helpCenter/ContactSupport.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ContainerHelpCenter } from "../utils/Containers";
+import { Button } from "@/components/ui/button";
+import { MoveRight } from "lucide-react";
+
+const ContactSupport = () => {
+  return (
+    <ContainerHelpCenter>
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Contact Support</CardTitle>
+          <CardDescription>
+            Get in touch with our support team for personalized assistance.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 w-full mb-5">
+            <CardTitle className="text-sm">Email Support</CardTitle>
+            <CardDescription>
+              For general inquires and non-urgen issues:{" "}
+              <strong>support@safetrust.com</strong>
+            </CardDescription>
+          </div>
+
+          <div className="flex flex-col gap-2 w-full mb-5">
+            <CardTitle className="text-sm">Phone Support</CardTitle>
+            <CardDescription>
+              For urgent matters and inmediate assistance:{" "}
+              <strong>+1(800) 123-4567</strong>
+            </CardDescription>
+          </div>
+
+          <div className="flex flex-col gap-2 w-full mb-5">
+            <CardTitle className="text-sm">Live Chat</CardTitle>
+            <CardDescription>
+              Chat with a support representative in real-time during business
+              hours.
+            </CardDescription>
+          </div>
+
+          <Button
+            type="button"
+            onClick={() => console.log("live chat")}
+            className="flex gap-5"
+          >
+            Start Live Chat <MoveRight />
+          </Button>
+        </CardContent>
+      </Card>
+    </ContainerHelpCenter>
+  );
+};
+
+export default ContactSupport;

src/components/modules/helpCenter/FAQ.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { ContainerHelpCenter } from "../utils/Containers";
+
+const FAQ = () => {
+  return (
+    <ContainerHelpCenter>
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that matches the other
+            components&apos; aesthetic.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-4">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-5">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-6">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </ContainerHelpCenter>
+  );
+};
+
+export default FAQ;

src/components/modules/helpCenter/HelpCenter.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useHelpCenter } from "./hooks/useHelpCenter";
+import { Input } from "@/components/ui/input";
+import FAQ from "./FAQ";
+import HelpTopics from "./HelpTopics";
+import ContactSupport from "./ContactSupport";
+import UserGuides from "./UserGuides";
+
+const HelpCenter = () => {
+  const { activeTab, setActiveTab } = useHelpCenter();
+
+  return (
+    <div className="flex w-full justify-center">
+      <Card className="w-11/12 mt-6 shadow-none border-none">
+        <CardHeader>
+          <CardTitle className="text-2xl">Help Center</CardTitle>
+          <div className="flex w-full justify-center">
+            <div className="flex w-full md:w-1/3">
+              <Input placeholder="Search for help..." />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="grid w-full grid-cols-2 gap-3 mb-10 md:grid-cols-4">
+              <TabsTrigger value="FAQ">FAQ</TabsTrigger>
+              <TabsTrigger value="HelpTopics">Help Topics</TabsTrigger>
+              <TabsTrigger value="ContactSupport">Contact Support</TabsTrigger>
+              <TabsTrigger value="UserGuides">User Guides</TabsTrigger>
+            </TabsList>
+            <TabsContent value="FAQ">
+              <FAQ />
+            </TabsContent>
+            <TabsContent value="HelpTopics">
+              <HelpTopics />
+            </TabsContent>
+            <TabsContent value="ContactSupport">
+              <ContactSupport />
+            </TabsContent>
+            <TabsContent value="UserGuides">
+              <UserGuides />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default HelpCenter;

src/components/modules/helpCenter/HelpTopics.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Book, CircleHelp, DollarSign, Shield } from "lucide-react";
+import { ContainerHelpCenter } from "../utils/Containers";
+import CardHelpTopic from "./ui/CardHelpTopic";
+
+const HelpTopics = () => {
+  return (
+    <ContainerHelpCenter>
+      <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <CardHelpTopic
+          title="Getting Started"
+          icon={CircleHelp}
+          description="Learn the basics of using SafeTrust and set up your account."
+          link="#"
+        />
+
+        <CardHelpTopic
+          title="Security Features"
+          icon={Shield}
+          description="Understand the security measures in place to protect your assets."
+          link="#"
+        />
+
+        <CardHelpTopic
+          title="Managing Contracts"
+          icon={Book}
+          description="Learn how to create, modify and close smart contracts."
+          link="#"
+        />
+
+        <CardHelpTopic
+          title="Deposits and Withdrawals"
+          icon={DollarSign}
+          description="Understand how to manage your funds on SafeTrust"
+          link="#"
+        />
+
+        <CardHelpTopic
+          title="Dispute Resolution"
+          icon={CircleHelp}
+          description="Learn about our dispute resolution process and how it works."
+          link="#"
+        />
+
+        <CardHelpTopic
+          title="Account Settings"
+          icon={CircleHelp}
+          description="Manage your account preferences and security settings."
+          link="#"
+        />
+      </div>
+    </ContainerHelpCenter>
+  );
+};
+
+export default HelpTopics;

src/components/modules/helpCenter/UserGuides.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ContainerHelpCenter } from "../utils/Containers";
+import ItemUserGuide from "./ui/ItemUserGuide";
+
+const UserGuides = () => {
+  return (
+    <ContainerHelpCenter>
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">User Guides</CardTitle>
+          <CardDescription>
+            Comprehensive guides to help you navigate SafeTrust's features.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ItemUserGuide
+            title="Complete Guide to Smart Contracts"
+            description="Learn everything about creating and managing smart contracts on SafeTrust"
+            link="#"
+          />
+
+          <ItemUserGuide
+            title="Security Best Practices"
+            description="Discover how to keep your account and transactions secure."
+            link="#"
+          />
+
+          <ItemUserGuide
+            title="Escrow Services Explained"
+            description="Understand how to use SafeTrust's escrow services for secure transactions."
+            link="#"
+          />
+
+          <ItemUserGuide
+            title="Dispute Resolution Process"
+            description="A step-by-step guide to resolving disputes on the SafeTrust platform."
+            link="#"
+          />
+
+          <ItemUserGuide
+            title="Managing Multiple Contracts"
+            description="Tips and tricks for efficiently managing multiple contracts simultaneously."
+            link="#"
+          />
+        </CardContent>
+      </Card>
+    </ContainerHelpCenter>
+  );
+};
+
+export default UserGuides;

src/components/modules/helpCenter/hooks/useHelpCenter.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import { useState } from "react";
+
+export function useHelpCenter() {
+  const [activeTab, setActiveTab] = useState("FAQ");
+
+  return {
+    activeTab,
+    setActiveTab,
+  };
+}

src/components/modules/helpCenter/ui/CardHelpTopic.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+
+interface CardHelpTopicProps {
+  title: string;
+  icon: React.ElementType;
+  description: string;
+  link: string;
+}
+
+const CardHelpTopic = ({
+  title,
+  icon: Icon,
+  description,
+  link,
+}: CardHelpTopicProps) => {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <Icon className="w-4 h-4 text-gray-500" />
+          <CardTitle className="text-lg">{title}</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <CardDescription>{description}</CardDescription>
+
+        <Link href={link} className="w-full mt-4 flex justify-between">
+          <p className="text-sm">Explore</p>
+          <ChevronRight className="w-4 h-4" />
+        </Link>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardHelpTopic;