Skip to content

Commit

Permalink
Update faq
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnushkaChouhan25
AnushkaChouhan25 committed Nov 10, 2024
1 parent 51c3f3c commit 821747b
Showing 1 changed file with 41 additions and 100 deletions.
141 changes: 41 additions & 100 deletions app/faq/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,58 @@
"use client";
import { Bold } from "lucide-react";
import { useRouter } from "next/router";
import React, { useState } from 'react';
import Image from 'next/image';
import { Plus, Minus } from "lucide-react";

const Faq: React.FC = () => {
const [activeIndex, setActiveIndex] = useState<number | null>(null);

const toggleAccordion = (index: number) => {
setActiveIndex(activeIndex === index ? null : index);
};

const faqData = [
{ question: "What is Git-trace?", answer: "Git-trace is an open-source tool that allows users to view and bookmark GitHub repositories and issues, making it easier to keep track of projects." },
{ question: "What features does Git-trace offer?", answer: "Git-trace allows you to search for repositories, view issues related to those repositories, and bookmark important repositories and issues for quick access." },
{ question: "What technology stack is used for Git-trace?", answer: "Git-trace uses Next.js and React for the frontend, while the backend utilizes GitHub's API for data retrieval, along with Prisma and Neon DB for data management." },
{ question: "How do I search for repositories on Git-trace?", answer: "You can search for repositories by entering the owner's name and the repository's name in the search bar." },
{ question: "How can I bookmark repositories and issues?", answer: "After viewing a repository or issue, you can use the bookmarking feature to save it for easy access later." },
{ question: "What should I do if I encounter issues while using Git-trace?", answer: "You can report any issues on the GitHub repository, where maintainers and the community can assist you." },
{ question: "Can I use Git-trace without installing it locally?", answer: "Yes, you can access Git-trace directly through the web at git-trace.vercel.com." },
];

return (
<div className="faq-container" style={{ maxWidth: '1000px', margin: 'auto', marginTop: '2rem' }}>
<div className="faq-container" style={{ maxWidth: '1000px', margin: 'auto', marginTop: '5rem' }}>
<strong><h1>Frequently Asked Questions</h1></strong>
<br />

<div className="faq-items-container dark:text-white bg-slate-50 dark:bg-gray-900" style={{ borderRadius: '8px', boxShadow: '0 2px 1px rgba(0, 0, 0, 0.1)', padding: '20px' }}>
<div>
<button
onClick={() => toggleAccordion(1)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc'}}>
<strong>What is Git-trace?</strong>
</button>
{activeIndex === 1 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
<strong>Git-trace is an open-source tool</strong> that allows users to view and bookmark GitHub repositories and issues, making it easier to keep track of projects.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(2)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>What features does Git-trace offer?</strong>
</button>
{activeIndex === 2 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
<strong>Git-trace allows you to search for repositories,</strong> view issues related to those repositories, and bookmark important repositories and issues for quick access.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(3)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>What technology stack is used for Git-trace?</strong>
</button>
{activeIndex === 3 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
<strong>Git-trace uses Next.js and React for the frontend,</strong> while the backend utilizes GitHub&#39;s API for data retrieval, along with Prisma and Neon DB for data management.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(4)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>How do I search for repositories on Git-trace?</strong>
</button>
{activeIndex === 4 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
You can search for repositories by entering the owner&#39;s name and the repository&#39;s name in the search bar.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(5)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>How can I bookmark repositories and issues?</strong>
</button>
{activeIndex === 5 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
After viewing a repository or issue, you can use the bookmarking feature to save it for easy access later.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(6)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>What should I do if I encounter issues while using Git-trace?</strong>
</button>
{activeIndex === 6 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
<strong>You can report any issues on the GitHub repository,</strong> where maintainers and the community can assist you.
</div>
)}
</div>
<br />

<div>
<button
onClick={() => toggleAccordion(7)}
style={{ width: '100%', padding: '10px', textAlign: 'left', border: '1px solid #ccc' }}>
<strong>Can I use Git-trace without installing it locally?</strong>
</button>
{activeIndex === 7 && (
<div className="accordion-body" style={{ padding: '10px', border: '1px solid #ccc', borderTop: 'none' }}>
<strong>Yes,</strong> you can access Git-trace directly through the web at git-trace.vercel.com.
</div>
)}
</div>
{faqData.map((item, index) => (
<div key={index}>
<button
onClick={() => toggleAccordion(index)}
style={{
width: '100%',
padding: '20px',
textAlign: 'left',
// border: '1px solid #ccc',
borderRadius: '10px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
cursor: 'pointer'
}}
>
<strong>{item.question}</strong>
<span style={{ marginLeft: '10px' }}>
{activeIndex === index ? <Minus size={20} /> : <Plus size={20} />}
</span>
</button>
{activeIndex === index && (
<div className="accordion-body" style={{ padding: '10px', paddingLeft: '20px', paddingRight: '40px', marginTop: '-1px' }}>
{item.answer}
</div>
)}
</div>
))}
</div>
</div>
);
Expand Down

0 comments on commit 821747b

Please sign in to comment.