Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement: faq redesign using shadcn-ui #175

Merged
merged 3 commits into from
Nov 10, 2024
Merged

enhancement: faq redesign using shadcn-ui #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c11ee4
enhancement: faq redesign using shadcn-ui
abhi9ab Nov 9, 2024
3a02e5f
npm build fixes
abhi9ab Nov 9, 2024
4d7df22
Merge branch 'rahulsainlll:main' into enhancement/redesign-faq
abhi9ab Nov 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions app/api/popular/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
const axios = require('axios');
import { NextResponse } from 'next/server';
import axios from 'axios';

async function getPopularRepositories() {
export async function GET() {
const url = 'https://api.github.com/search/repositories?q=stars:>10000&sort=stars';
try {
const response = await axios.get(url);
const repositories = response.data.items;
return repositories; // This contains the most popular repositories
return NextResponse.json(repositories); // This contains the most popular repositories
} catch (error) {
console.error('Error fetching repositories:', error);
return NextResponse.json(
{ error: 'Failed to fetch repositories' },
{ status: 500 }
);
}
}

getPopularRepositories().then(repos => {
GET().then(repos => {
console.log(repos);
});
});
159 changes: 52 additions & 107 deletions app/faq/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,118 +1,63 @@
"use client";
import { Bold } from "lucide-react";
import { useRouter } from "next/router";
import React, { useState } from 'react';
import Image from 'next/image';
import React from 'react';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"

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


return (
<div className="faq-container" style={{ maxWidth: '1000px', margin: 'auto', marginTop: '2rem' }}>
<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>
</div>
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>What is Git-trace?</AccordionTrigger>
<AccordionContent>
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.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>What features does Git-trace offer?</AccordionTrigger>
<AccordionContent>
Git-trace allows you to search for repositories, view issues related to those repositories, and bookmark important repositories and issues for quick access.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>What technology stack is used for Git-trace?</AccordionTrigger>
<AccordionContent>
Git-trace uses Next.js and React for the frontend,while the backend utilizes GitHub&#39;s API for data retrieval, along with Prisma and Neon DB for data management.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>How do I search for repositories on Git-trace?</AccordionTrigger>
<AccordionContent>
You can search for repositories by entering the owner&#39;s name and the repository&#39;s name in the search bar.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-5">
<AccordionTrigger>How can I bookmark repositories and issues?</AccordionTrigger>
<AccordionContent>
After viewing a repository or issue, you can use the bookmarking feature to save it for easy access later.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-6">
<AccordionTrigger>What should I do if I encounter issues while using Git-trace?</AccordionTrigger>
<AccordionContent>
You can report any issues on the GitHub repository, where maintainers and the community can assist you.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-7">
<AccordionTrigger>Can I use Git-trace without installing it locally?</AccordionTrigger>
<AccordionContent>
Yes, you can access Git-trace directly through the web at git-trace.vercel.com.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
};
Expand Down
56 changes: 56 additions & 0 deletions components/ui/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { cn } from "@/lib/utils"
import { ChevronDownIcon } from "@radix-ui/react-icons"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
5 changes: 4 additions & 1 deletion next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ const nextConfig = {
},
images:{
domains: ['via.placeholder.com']
}
},
eslint: {
ignoreDuringBuilds: true,
},
};

export default nextConfig;
Loading