oxen-io/oxen-website
1
0
Fork 0
mirror of https://github.com/oxen-io/oxen-website.git synced 2023-12-13 21:00:18 +01:00
Code Issues Projects Releases Wiki Activity

Update Accordion CSS

Browse source
This commit is contained in:
Lucas Phang 2021-05-19 14:57:59 +10:00
parent f6c5ac4893
commit 20ebf6f400
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/Accordion.tsx
View file

@ -1,7 +1,8 @@
import React, { useState, useRef } from 'react'; import React, { useState, useRef } from 'react';
import { RichBody } from '../components/RichBody'; import { RichBody } from '../components/RichBody';
import classNames from 'classnames'; import classNames from 'classnames';
import TriangleSVG from '../assets/svgs/triangle.svg'; import TriangleOutlinedSVG from '../assets/svgs/triangle-outlined.svg';
import { useHoverDirty } from 'react-use';
export function Accordion(props) { export function Accordion(props) {
const { question, answer } = props; const { question, answer } = props;
@ -9,6 +10,10 @@ export function Accordion(props) {
const [height, setHeight] = useState('0px'); const [height, setHeight] = useState('0px');
const content = useRef(null); const content = useRef(null);
const button = useRef(null);
const isHovering = useHoverDirty(button);
const isExcited = isActive || isHovering;
function toggleAccordion() { function toggleAccordion() {
setActiveState(!isActive); setActiveState(!isActive);
setHeight(isActive ? '0px' : `${content.current.scrollHeight}px`); setHeight(isActive ? '0px' : `${content.current.scrollHeight}px`);
@ -17,17 +22,19 @@ export function Accordion(props) {
return ( return (
<div className="mb-1 border border-current rounded-sm"> <div className="mb-1 border border-current rounded-sm">
<button <button
ref={button}
className={classNames( className={classNames(
'flex accordion text-xl tablet:text-2xl w-full text-left justify-between items-center hover:bg-secondary cursor-pointer py-3 px-6', 'flex accordion text-xl tablet:text-2xl w-full text-left justify-between items-center hover:bg-secondary duration-300 cursor-pointer py-3 px-6',
isActive ? 'bg-secondary' : '', isActive ? 'bg-secondary' : '',
)} )}
onClick={toggleAccordion} onClick={toggleAccordion}
> >
<div style={{ maxWidth: '90%' }}>{question}</div> <div style={{ maxWidth: '90%' }}>{question}</div>
<TriangleSVG <TriangleOutlinedSVG
className={classNames( className={classNames(
'h-3 fill-current text-primary transform outline-none cursor-pointer duration-200', 'h-3 fill-current transform outline-none cursor-pointer duration-300 text-transparent',
isActive ? 'rotate-90' : '', isActive ? 'rotate-90' : '',
isExcited ? 'text-primary' : '',
)} )}
/>{' '} />{' '}
</button> </button>