Skip to content

Commit

Permalink
Merge pull request #240 from Asymtode712/HoverFeat
Browse files Browse the repository at this point in the history 
added hovering effect and enhaced UI
  • Loading branch information
@Kritika30032002
Kritika30032002 authored Jun 7, 2024
2 parents 58657c1 + 3cc853f commit 2b712a6
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 93 deletions.
35 changes: 16 additions & 19 deletions src/app/(routes)/faqs/page.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
.close {
animation: close-animation 1s forwards;
.faq-item {
position: relative;
cursor: pointer;
}
.open {
animation: open-animation 1s forwards;
}
@keyframes open-animation {
from {
height: 55px;
}
to {
height: 140px;
}

.faq-item .faq-detail {
display: none;
background-color: #f8f8f8;
padding: 10px;
border: 1px solid #ccc;
z-index: 1;
margin-top: 10px;
top: 100%;
left: 0;
width: 100%;
}

@keyframes close-animation {
from {
height: 140px;
}
to {
height: 55px;
}
.faq-item:hover .faq-detail {
display: block;
}
98 changes: 26 additions & 72 deletions src/app/(routes)/faqs/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,37 @@
'use client';
import React, { useState } from 'react';
import { MdOutlineArrowDropDown } from 'react-icons/md';
import {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemButton,
AccordionItemPanel,
AccordionItemState,
} from 'react-accessible-accordion';
import styles from './page.css';

import React from 'react';
import './page.css';
import data from '@/utils/accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

export default function Page() {
const [className, setClassName] = useState(null);
let [index, setIndex] = useState(null);
return (
<section className=" mt-28 py-8 mb-20 lg:w-[720px] md:w-[520px] w-[380px] m-auto px-2 flex flex-col justify-between">
<div className=" p-6 w-full flex gap-y-8 justify-center items-center rounded-md flex-wrap mt-[46px] border-gray-300 border-[1px]">
<section className="mt-28 py-8 mb-20 lg:w-[720px] md:w-[520px] w-[380px] m-auto px-2 flex flex-col justify-between">
<div className="p-6 w-full flex gap-y-8 justify-center items-center rounded-md flex-wrap mt-[46px] border-gray-300 border-[1px]">
<div className="flex flex-col justify-center items-start gap-2">
<span className=" text-[#A855F7]">Our Value</span>
<span className=" text-white">
<span className="text-[#A855F7]">Our Value</span>
<span className="text-white">
MyStory - Next.js Blog/Story telling Template
</span>
<span className=" text-gray-500 text-sm">
MyStory aims to provide a platform where individuals can share their
stories without the pressure of revealing their identities.
It&apos;s a safe space for expression and connection.
<span className="text-gray-500 text-sm">
MyStory aims to provide a platform where individuals can share their stories without the pressure of revealing their identities. It&apos;s a safe space for expression and connection.
</span>
<Accordion
className=" border-none mt-8"
allowMultipleExpanded={false}
preExpanded={[0]}
>
{data.map((item, i) => {
return (
<AccordionItem
className={` border-2 border-gray-400 rounded-lg overflow-hidden mb-5 ${className} ${index == i ? 'open' : 'close'}`}
key={i}
uuid={i}
>
<AccordionItemHeading>
<AccordionItemButton className="flex justify-center flex-wrap items-center gap-y-3 ">
<AccordionItemState>
{({ expanded }) =>
expanded
? setClassName('expanded')
: setClassName('collapsed')
}
</AccordionItemState>
<div className=" flex items-center justify-between w-full pt-2 pb-2 pl-8 pr-8">
<div className="flex justify-center items-center flex-wrap p-2 bg-gray-800 rounded-lg">
{item.icon}
</div>
<span className=" text-white text-xs md:text-base">
{item.heading}
</span>
<div className="flex justify-center items-center flex-wrap p-2 bg-gray-800 rounded-lg">
<MdOutlineArrowDropDown
className=" text-white"
size={20}
onClick={() => {
setIndex(i);
}}
/>
</div>
</div>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<p className=" text-gray-500 text-xs md:text-base">
{item.detail}
</p>
</AccordionItemPanel>
</AccordionItem>
);
})}
</Accordion>
<div className="mt-8 w-full">
{data.map((item, i) => (
<div key={i} className="faq-item border-2 border-gray-400 rounded-lg overflow-hidden mb-5 p-4 relative">
<div className="flex items-center justify-between">
<div className="flex items-center p-2 bg-purple-500 rounded-lg">
{item.icon}
</div>
<span className="text-gray-500 text-xs md:text-base">
{item.heading}
</span>
</div>
<div className="faq-detail text-gray-500 text-xs md:text-base top-full left-0 w-full bg-white p-4">
{item.detail}
</div>
</div>
))}
</div>
</div>
</div>
</section>
Expand Down
4 changes: 2 additions & 2 deletions src/utils/accordion.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ const data = [
icon: <MdAnalytics />,
heading: 'How to Contribute as a Developer?',
detail:
'MyStory is an opensource lead and welcome developer across the world. you can find more in its github repository and under readme file for more details',
'MyStory is an opensource lead and welcome developer across the world. You can find more in its github repository and under readme file for more details',
},
{
icon: <MdCancel />,
heading: 'Is it safe for all to use MyStory?',
detail:
"yes, mystory doesn't allow vulgar words, hate speech and if any individual found breaking the community guideline, it might lead to account suspension.",
"Yes, MyStory doesn't allow vulgar words, hate speech and if any individual found breaking the community guidelines, it might lead to account suspension.",
},
];
export default data;

0 comments on commit 2b712a6

Please sign in to comment.