search

kleneway / jacb-ai-website

The jacb.ai marketing website
https://www.jacb.ai
MIT License
0 stars 0 forks source link

Create src/components/faq.tsx #7

Open jacob-local-kevin[bot] opened 4 months ago

jacob-local-kevin[bot] commented 4 months ago

Summary:

Add FAQs section to the homepage

Description

Add a FAQs section to the homepage with the following requirements:

New Files:

Acceptance Criteria:

Steps to Address Issue: 1. Create a new file 'src/components/faq.tsx' for the FAQ component. 2. Implement collapsible sections for each question/answer pair in the new FAQ component. 3. Use Tailwind CSS for styling the FAQ component. 4. Implement a slight animation for the collapsible sections. 5. Create separate components for each question and answer within 'src/components/faq.tsx'. 6. Update 'src/pages/index.tsx' to include the new FAQ component about halfway down the page.

Files to Create: src/components/faq.tsx

Files to Update: src/pages/index.tsx

task assigned to: @jacob-ai-bot

Plan:

Step-by-Step Plan to Create src/components/faq.tsx

  1. Create the FAQ Component File:

    • Create a new file named faq.tsx in the src/components directory.

  2. Set Up Basic Component Structure:

    • Define a functional component named FAQ.
    • Import necessary React and Tailwind CSS modules.

  3. Create Question and Answer Components:

    • Within faq.tsx, define two separate functional components: Question and Answer.
    • These components will receive props for the question text and answer text, respectively.

  4. Implement Collapsible Sections:

    • Use state management (e.g., useState) to handle the visibility of each answer.
    • Implement a toggle function to show/hide the answer when a question is clicked.

  5. Add Tailwind CSS Styling:

    • Apply Tailwind CSS classes to style the Question and Answer components.
    • Ensure the FAQ section has a clean and responsive design.

  6. Implement Animation:

    • Use Tailwind CSS utilities or custom CSS to add a slight animation for the collapsible sections.
    • Ensure the animation is smooth and enhances user experience.

  7. Combine Components in Main FAQ Component:

    • In the FAQ component, map through an array of question/answer pairs.
    • Render the Question and Answer components for each pair, passing the appropriate props.

  8. Export the FAQ Component:

    • Export the FAQ component as the default export from faq.tsx.

  9. Update index.tsx to Include FAQ Component:

    • Import the FAQ component in src/pages/index.tsx.
    • Place the FAQ component about halfway down the page, ensuring it fits well within the overall layout.

  10. Test and Verify:

    • Run the application to ensure the FAQ section appears correctly on the homepage.
    • Verify that the collapsible sections work as expected and the styling/animation is applied properly.

Example Code Snippet for faq.tsx

// src/components/faq.tsx
import React, { useState } from 'react';

const Question = ({ text, onClick }) => (
  <div className="cursor-pointer p-4 bg-gray-200" onClick={onClick}>
    {text}
  </div>
);

const Answer = ({ text, isVisible }) => (
  <div className={`p-4 bg-gray-100 transition-all duration-300 ${isVisible ? 'max-h-screen' : 'max-h-0 overflow-hidden'}`}>
    {text}
  </div>
);

const FAQ = () => {
  const [visibleIndex, setVisibleIndex] = useState(null);

  const faqs = [
    { question: 'What is your return policy?', answer: 'Our return policy is ...' },
    { question: 'How do I track my order?', answer: 'You can track your order by ...' },
    // Add more FAQs here
  ];

  const toggleVisibility = (index) => {
    setVisibleIndex(visibleIndex === index ? null : index);
  };

  return (
    <div className="my-8">
      {faqs.map((faq, index) => (
        <div key={index} className="mb-4">
          <Question text={faq.question} onClick={() => toggleVisibility(index)} />
          <Answer text={faq.answer} isVisible={visibleIndex === index} />
        </div>
      ))}
    </div>
  );
};

export default FAQ;

Example Code Snippet for index.tsx

// src/pages/index.tsx
import React from 'react';
import FAQ from '../components/faq';

const HomePage = () => {
  return (
    <div>
      {/* Other components and content */}
      <div className="my-16">
        <FAQ />
      </div>
      {/* Other components and content */}
    </div>
  );
};

export default HomePage;

This plan ensures that the FAQ section is implemented with collapsible sections, styled with Tailwind CSS, and includes a slight animation, meeting all the specified requirements.

Storybook Story:

I will update this PR with a storybook story for this component.

@jacob-ai-bot create story

jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy creating a storybook story for this component.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

This PR has been updated with a new commit.

Next Steps

I am working to resolve an error. I will update this PR with my progress. @jacob-ai-bot fix error

Error Message:

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verb cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/bin/npm
npm info using npm@10.2.3
npm info using node@v20.10.0
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-05-17T22_47_23_640Z-
npm verb logfile /Users/kleneway/.npm/_logs/2024-05-17T22_47_23_640Z-debug-0.log

===== TS errors =====

[Test Mode] ./src/components/faq.stories.tsx:28:45
Type error: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

  26 |   args: {},
  27 |   render: () => {
> 28 |     const [visibleIndex, setVisibleIndex] = React.useState<number | null>(0);
     |                                             ^
  29 |     const faqs = [
  30 |       { question: "What is your return policy?", answer: "Our return policy is ..." },
  31 |       { question: "How do I track my order?", answer: "You can track your order by ..." },

===== TS errors =====

Failed to compile.

./src/components/faq.stories.tsx:28:45
Type error: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

  26 |   args: {},
  27 |   render: () => {
> 28 |     const [visibleIndex, setVisibleIndex] = React.useState<number | null>(0);
     |                                             ^
  29 |     const faqs = [
  30 |       { question: "What is your return policy?", answer: "Our return policy is ..." },
  31 |       { question: "How do I track my order?", answer: "You can track your order by ..." },
npm verb exit 1
npm verb code 1
jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

This PR has been updated with a new commit.

Next Steps

I am working to resolve an error. I will update this PR with my progress. @jacob-ai-bot fix error

Error Message (Attempt Number 2):

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verb cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/bin/npm
npm info using npm@10.2.3
npm info using node@v20.10.0
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-05-17T22_50_36_045Z-
npm verb logfile /Users/kleneway/.npm/_logs/2024-05-17T22_50_36_045Z-debug-0.log

Failed to compile.

./src/components/chat/Chat.tsx
29:3  Warning: 'onReset' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars
33:3  Warning: 'shouldHideLogo' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/components/chat/ChatHeader.tsx
1:37  Warning: 'useState' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/chat/ChatMessage.tsx
49:7  Warning: 'node' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars

./src/components/dashboard/tasks/TaskStatus.tsx
6:3  Warning: 'faCircle' is defined but never used.  @typescript-eslint/no-unused-vars
12:7  Warning: 'DAILY_GOAL' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/components/dashboard/tasks/index.tsx
1:17  Warning: 'use' is defined but never used.  @typescript-eslint/no-unused-vars
23:3  Warning: 'onRemove' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars

./src/components/dashboard/workspace/Issue.tsx
24:9  Warning: 'renderers' is assigned a value but never used.  @typescript-eslint/no-unused-vars
26:7  Warning: 'node' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars

./src/components/dashboard/workspace/Prompts.tsx
30:7  Warning: 'node' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars

./src/components/faq.stories.tsx
29:45  Error: React Hook "React.useState" is called in function "render" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".  react-hooks/rules-of-hooks

./src/components/home/CodeInAction.stories.tsx
2:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

./src/components/home/Hero.stories.tsx
1:8  Warning: 'React' is defined but never used.  @typescript-eslint/no-unused-vars

./src/components/home/Intro.stories.tsx
1:8  Warning: 'React' is defined but never used.  @typescript-eslint/no-unused-vars
2:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

./src/components/home/JacobInMotion.tsx
1:17  Warning: 'use' is defined but never used.  @typescript-eslint/no-unused-vars
2:10  Warning: 'FontAwesomeIcon' is defined but never used.  @typescript-eslint/no-unused-vars
3:10  Warning: 'faPlay' is defined but never used.  @typescript-eslint/no-unused-vars
7:10  Warning: 'isPlaying' is assigned a value but never used.  @typescript-eslint/no-unused-vars
30:6  Warning: React Hook useEffect has a missing dependency: 'videoUrls'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/components/home/Playlist.stories.tsx
1:8  Warning: 'React' is defined but never used.  @typescript-eslint/no-unused-vars
2:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

./src/components/home/WhyJacob.stories.tsx
1:8  Warning: 'React' is defined but never used.  @typescript-eslint/no-unused-vars
2:1  Warning: All imports in the declaration are only used as types. Use `import type`.  @typescript-eslint/consistent-type-imports

./src/pages/dashboard.tsx
64:10  Warning: 'issues' is assigned a value but never used.  @typescript-eslint/no-unused-vars
464:6  Warning: React Hook useEffect has a missing dependency: 'selectedRepo'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
648:39  Warning: 'newName' is defined but never used. Allowed unused args must match /^_/u.  @typescript-eslint/no-unused-vars
716:9  Warning: 'numTotalTasks' is assigned a value but never used.  @typescript-eslint/no-unused-vars
717:9  Warning: 'tasksToDo' is assigned a value but never used.  @typescript-eslint/no-unused-vars

./src/pages/results.tsx
7:10  Warning: 'userId' is assigned a value but never used.  @typescript-eslint/no-unused-vars

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
npm verb exit 1
npm verb code 1
jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

This PR has been updated with a new commit.

Next Steps

I am working to resolve an error. I will update this PR with my progress. @jacob-ai-bot fix error

Error Message (Attempt Number 3):

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verb cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/bin/npm
npm info using npm@10.2.3
npm info using node@v20.10.0
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-05-17T22_53_30_823Z-
npm verb logfile /Users/kleneway/.npm/_logs/2024-05-17T22_53_30_823Z-debug-0.log

===== TS errors =====

[Test Mode] ./src/components/dashboard/tasks/index.tsx:52:6
Type error: JSX element 'div' has no corresponding closing tag.

  50 |
  51 |   return (
> 52 |     <div className="grid h-full min-h-screen w-full grid-rows-[1fr_auto] border-x border-coolGray-400/20 bg-gray-900 bg-slate-50/5">
     |      ^
  53 |       <div className="hide-scrollbar overflow-auto">
  54 |         {tasks.filter((t) => t.status === TaskStatus.TODO).length > 0 ? (
  55 |           <DragDropContext onDragEnd={handleDragEnd}>

[Test Mode] ./src/components/dashboard/tasks/index.tsx:53:8
Type error: JSX element 'div' has no corresponding closing tag.

  51 |   return (
  52 |     <div className="grid h-full min-h-screen w-full grid-rows-[1fr_auto] border-x border-coolGray-400/20 bg-gray-900 bg-slate-50/5">
> 53 |       <div className="hide-scrollbar overflow-auto">
     |        ^
  54 |         {tasks.filter((t) => t.status === TaskStatus.TODO).length > 0 ? (
  55 |           <DragDropContext onDragEnd={handleDragEnd}>
  56 |             <Droppable droppableId="tasks">

[Test Mode] ./src/components/dashboard/tasks/index.tsx:55:12
Type error: JSX element 'DragDropContext' has no corresponding closing tag.

  53 |       <div className="hide-scrollbar overflow-auto">
  54 |         {tasks.filter((t) => t.status === TaskStatus.TODO).length > 0 ? (
> 55 |           <DragDropContext onDragEnd={handleDragEnd}>
     |            ^
  56 |             <Droppable droppableId="tasks">
  57 |               {(provided) => (
  58 |                 <

[Test Mode] ./src/components/dashboard/tasks/index.tsx:56:14
Type error: JSX element 'Droppable' has no corresponding closing tag.

  54 |         {tasks.filter((t) => t.status === TaskStatus.TODO).length > 0 ? (
  55 |           <DragDropContext onDragEnd={handleDragEnd}>
> 56 |             <Droppable droppableId="tasks">
     |              ^
  57 |               {(provided) => (
  58 |                 <

[Test Mode] ./src/components/dashboard/tasks/index.tsx:57:30
Type error: Type 'boolean' is not assignable to type 'ReactElement<HTMLElement, string | JSXElementConstructor<any>>'.

  55 |           <DragDropContext onDragEnd={handleDragEnd}>
  56 |             <Droppable droppableId="tasks">
> 57 |               {(provided) => (
     |                              ^
  58 |                 <

[Test Mode] ./src/components/dashboard/tasks/index.tsx:58:17
Type error: Expression expected.

  56 |             <Droppable droppableId="tasks">
  57 |               {(provided) => (
> 58 |                 <
     |                 ^

[Test Mode] ./src/components/dashboard/tasks/index.tsx:58:18
Type error: '</' expected.

  56 |             <Droppable droppableId="tasks">
  57 |               {(provided) => (
> 58 |                 <
     |                  ^

[Test Mode] ./src/components/dashboard/tasks/index.tsx:58:18
Type error: Expression expected.

  56 |             <Droppable droppableId="tasks">
  57 |               {(provided) => (
> 58 |                 <
     |                  ^

[Test Mode] ./src/pages/dashboard.tsx:4:8
Type error: Module '"/private/tmp/tmp-84718-7oUMWmSJIQNf/src/components/dashboard/tasks/index"' has no default export.

  2 | import React, { useEffect, useRef, useState } from "react";
  3 | import { Chat } from "~/components/chat/Chat";
> 4 | import Tasks from "~/components/dashboard/tasks";
    |        ^
  5 | import Workspace from "~/components/dashboard/workspace";
  6 | import {
  7 |   InternalEventType,

===== TS errors =====

Failed to compile.

./src/components/dashboard/tasks/index.tsx:52:6
Type error: JSX element 'div' has no corresponding closing tag.

  50 |
  51 |   return (
> 52 |     <div className="grid h-full min-h-screen w-full grid-rows-[1fr_auto] border-x border-coolGray-400/20 bg-gray-900 bg-slate-50/5">
     |      ^
  53 |       <div className="hide-scrollbar overflow-auto">
  54 |         {tasks.filter((t) => t.status === TaskStatus.TODO).length > 0 ? (
  55 |           <DragDropContext onDragEnd={handleDragEnd}>
npm verb exit 1
npm verb code 1
jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

This PR has been updated with a new commit.

Next Steps

I am working to resolve an error. I will update this PR with my progress. @jacob-ai-bot fix error

Error Message (Attempt Number 4):

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verb cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/bin/npm
npm info using npm@10.2.3
npm info using node@v20.10.0
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-05-17T22_55_19_355Z-
npm verb logfile /Users/kleneway/.npm/_logs/2024-05-17T22_55_19_355Z-debug-0.log

===== TS errors =====

[Test Mode] ./src/pages/dashboard.tsx:44:7
Type error: Type '() => void' is not assignable to type 'FC<{}>'.
  Type 'void' is not assignable to type 'ReactNode'.

  42 | const supabase = createClient(supabaseUrl, supabaseAnonKey);
  43 |
> 44 | const DashboardPage: React.FC = () => {
     |       ^
  45 |   const [messages, setMessages] = useState<Message[]>([]);
  46 |   const messagesEndRef = useRef<HTMLDivElement>(null);
  47 |   const sidebarRef = useRef<HTMLDivElement>(null);

[Test Mode] ./src/pages/dashboard.tsx:171:15
Type error: Type '{ id: string; repo: string; name: string; type: any; }' is missing the following properties from type 'Task': description, storyPoints, status

  169 |       // TEMP: go through each issue and create a new task for each one
  170 |       for (const [index, issue] of data.issues.entries()) {
> 171 |         const newTask: Task = {
      |               ^
  172 |           id: Math.random().toString(36).substring(7),
  173 |           repo: selectedRepo,
  174 |           name: issue.title,

[Test Mode] ./src/pages/dashboard.tsx:177:24
Type error: Identifier expected.

  175 |           type: issue.filesToCreate?.length
  176 |             ? TaskType.CREATE_NEW_FILE
> 177 |             : TaskType.
      |                        ^

===== TS errors =====

Failed to compile.

./src/pages/dashboard.tsx:44:7
Type error: Type '() => void' is not assignable to type 'FC<{}>'.
  Type 'void' is not assignable to type 'ReactNode'.

  42 | const supabase = createClient(supabaseUrl, supabaseAnonKey);
  43 |
> 44 | const DashboardPage: React.FC = () => {
     |       ^
  45 |   const [messages, setMessages] = useState<Message[]>([]);
  46 |   const messagesEndRef = useRef<HTMLDivElement>(null);
  47 |   const sidebarRef = useRef<HTMLDivElement>(null);
npm verb exit 1
npm verb code 1
jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

jacob-local-kevin[bot] commented 4 months ago

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.