-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
setting up faq + detail component (#55)
* commands page + detail component * feat: add faq component * Update faq.mdx
- Loading branch information
1 parent
7352ff2
commit f99580e
Showing
15 changed files
with
181 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,15 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <FAQ> | ||
| <FAQItem question="Why is my connection to PostgreSQL from a 3rd party software failing?"> | ||
| *One of possible causes*: <br/>The connection string in Zerops always starts with <code>postgresql://</code>. | ||
|
|
||
| While the official PostgreSQL documentation states that both <code>postgresql://</code> and <code>postgres://</code> URIs are valid, some softwares require the shorter <code>postgres://</code> version. | ||
|
|
||
| To fix that, create your own environment variable with the correct URI, e.g. when your PostgreSQL service is called <code>db</code> - <code>postgres://`${db_user}`:`${db_password}`@`${db_hostname}`:`${db_port}`</code>. | ||
| </FAQItem> | ||
| </FAQ> | ||
|
|
||
| <details> | ||
| <summary>1. Connecting to PostgreSQL from a 3rd party software fails.</summary> | ||
| <p> | ||
| *One of possible causes*: <br/>The connection string in Zerops always starts with <code>postgresql://</code>. While the official PostgreSQL documentation states that both <code>postgresql://</code> and <code>postgres://</code> URIs are valid, some softwares require the shorter <code>postgres://</code> version. | ||
| <br/>To fix that, create your own environment variable with the correct URI, e.g. when your PostgreSQL service is called <code>db</code> - <code>postgres://`${db_user}`:`${db_password}`@`${db_hostname}`:`${db_port}`</code>. | ||
| </p> | ||
| </details> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| # FAQ | ||
| --- | ||
| title: Frequently Asked Questions | ||
| --- | ||
| import { FAQ, FAQItem } from "/src/components/Faq" | ||
|
|
||
| <details> | ||
| <summary>1. SAMPLE QUESTION</summary> | ||
| <p> | ||
| sample answer | ||
| </p> | ||
| </details> | ||
| <FAQ> | ||
| <FAQItem question="Sample Question"> | ||
| sample answer | ||
| </FAQItem> | ||
| </FAQ> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { ChevronDownMini, ChevronUpMini } from "@medusajs/icons"; | ||
| import React, { ReactNode, useState, useRef, useEffect } from "react"; | ||
|
|
||
| interface DetailProps { | ||
| title: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| export function Detail({ title, children }: DetailProps) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const contentRef = useRef<HTMLDivElement>(null); | ||
| const [height, setHeight] = useState<number | undefined>(0); | ||
|
|
||
| useEffect(() => { | ||
| if (isOpen && contentRef.current) { | ||
| setHeight(contentRef.current.scrollHeight); // Set height to the full scroll height when open | ||
| } else { | ||
| setHeight(0); // Reset height when closed | ||
| } | ||
| }, [isOpen]); | ||
|
|
||
| return ( | ||
| <div className="py-0.5"> | ||
| <div className="card bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-card-rest dark:shadow-card-rest-dark w-full py-1 px-0.5 rounded-md"> | ||
| <button | ||
| className="flex w-full justify-between items-center text-left bg-transparent border-none cursor-pointer" | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| aria-expanded={isOpen} | ||
| > | ||
| <span className="text-lg font-medium cursor-pointer">{title}</span> | ||
| {isOpen ? ( | ||
| <ChevronUpMini className="text-gray-500" /> | ||
| ) : ( | ||
| <ChevronDownMini className="text-gray-500" /> | ||
| )} | ||
| </button> | ||
| <div | ||
| ref={contentRef} | ||
| className={`overflow-hidden transition-all duration-300 ease-in-out`} | ||
| style={{ height }} | ||
| role="region" | ||
| > | ||
| <div className={`px-0.75 py-0.75`}> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.