accordian component

Author: nmayur

pages/all-components.tsx

@@ -1,10 +1,10 @@
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
-import { PageLayout, Text, LinkTo, Slider, Seperator, Image, List, ArticleHeader } from "../src/components"
+import { PageLayout, Text, LinkTo, Slider, Seperator, Image, List, Accordian } from "../src/components"
 import { ListType, ImageSize, TextAlign } from "../src/shared/enums"
 import { combineClasses } from "../src/utils/utils";
 import CodeBlock from "../src/components/CodeBlock";
-import { HowToUseList, HowToUseSeperator, HowToUsePageLayout, HowToUseImageCode, HowToUseTextCode, HowToUseLinkTo, HowToUseSlider } from "../src/constants/codeBlocks";
+import { HowToUseList, HowToUseSeperator, HowToUsePageLayout, HowToUseImageCode, HowToUseTextCode, HowToUseLinkTo, HowToUseSlider, HowToUseAccordian } from "../src/constants/codeBlocks";
 
 interface iSideBtnLinks {
  component: string,
@@ -238,6 +238,19 @@ const AllComponents = () => {
  <CodeBlock code={HowToUseSlider} className="my-5" />
  {/* <Image src="/public/images/tutorials/how-to-use-slider.svg" alt="how to use image slider | webexpe.com" /> */}
  </section>
+
+ <section className={cardBBorder} id="imageslider">
+ <Text subtitle className="mb-5 pb-3 border-b md:!text-3xl font-bold">
+ Accordian
+ </Text>
+ <b>Demo</b>
+ <Accordian title="Accordian Title" keepOpen>
+ Accordian content
+ </Accordian>
+ <b>How to use</b>
+ <CodeBlock code={HowToUseAccordian} className="mb-5 mt-3" />
+ </section>
+
  <div className="px-4 py-3 dark:bg-slate-800 bg-blue-200 rounded my-5">
  <Text p className="!text-lg leading-relaxed mb-0">
  For any any queries related to this project / template feel free to connect with us at <u>webexpe13@gmail.com</u>.

src/components/Accordian/index.tsx

@@ -0,0 +1,25 @@
+import { ChevronRightIcon } from '@heroicons/react/outline'
+import { useState } from 'react';
+import { combineClasses } from '../../utils/utils';
+
+const Accordian = ({ title = "Accordian Title", children, keepOpen = false }: any) => {
+ const [open, setOpen] = useState(keepOpen);
+
+ const openAccordian = () => {
+ setOpen(!open)
+ }
+
+ return (
+ <div className="border-b border-slate-300 pb-1 my-3 w-full">
+ <h3 className='md:text-xl text-[18px] font-bold cursor-pointer hover:opacity-80 transition-opacity flex justify-between md:items-center items-start' onClick={openAccordian}>
+ {title} <ChevronRightIcon className={combineClasses('md:w-[30px] w-[25px] md:pt-0 pt-1 transition-transform text-blue-800 ml-3 shrink-0', open ? '-rotate-90' : 'rotate-90')} />
+ </h3>
+ <div className={combineClasses('md:text-[18px] text-[16px] text-slate-700 dark:text-slate-300 font-regular overflow-hidden transition-all w-full ring-blue-200 rounded px-3',
+ open ? 'max-h-[300px] my-3 ring-1 p-2 ' : 'max-h-[0px]')}>
+ {children}
+ </div>
+ </div>
+ )
+}
+
+export default Accordian;

src/components/Search/index.tsx

@@ -26,7 +26,7 @@ const Search = ({ closeSearch }: ISearch) => {
  <div className='flex justify-between items-center md:pt-10 pt-5'>
  <h1 className={'text-[45px] font-bold'}>Search</h1>
  <button name="search-button" aria-label="search button" type="button" className={classes.search_close_icon} onClick={closeSearch}>
- <XIcon className='text-slate-800 dark:text-white text-[20px]' />
+ <XIcon className='text-slate-800 dark:text-white' />
  </button>
  </div>
  <div className="mb-[40px] mt-3">

src/components/index.ts

@@ -5,4 +5,5 @@ export {default as Image} from "./ArticleImage";
 export {default as Seperator} from "./Seperator";
 export {default as List} from "./List";
 export {default as LinkTo} from "./LinkTo";
-export {default as Slider} from "./Slider";
+export {default as Slider} from "./Slider";
+export {default as Accordian} from "./Accordian";

src/constants/codeBlocks.tsx

@@ -100,6 +100,25 @@ export const HowToUseList = `
  export default Article;
 `
 
+
+export const HowToUseAccordian = `
+ // import Accordian from components
+ import { ..., Accordian, ... } from "../../../src/components";
+ const Article = () => {
+ return (
+ <Accordian title="Accordian Title" />
+ Accordian Content
+ </Accordian>
+ {/* or if your want to keep it open by default */}
+ <Accordian title="Accordian Title" keepOpen />
+ Accordian Content
+ </Accordian>
+ )
+ }
+
+ export default Article;
+`
+
 export const HowToUseSeperator = `
  // import Seperator from components
  import { ..., Seperator, ... } from "../../../src/components";
@@ -258,6 +277,7 @@ export const rightSideAdCode= `
 
  export default Article;
 `;
+
 export const Article_Entry_inList = `
  // Import author profiles, just type the name you have set in _BLOG_SETUP inside the curly brackets
  import { MAYUR, RUPALI } from './_BLOG_SETUP';