Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Mobile View for Apply Section - Collapsible Headings (#252) #264

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve Mobile View for Apply Section - Collapsible Headings (#252) #264

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f51fb0
Fix #252 : Improve Mobile View for Apply Section - Collapsible Headings
yashsaraswat2004 Sep 17, 2024
4383ee5
fix svg link got mistakenely removed
yashsaraswat2004 Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 83 additions & 15 deletions src/components/TimelineElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,85 @@
import clsx from "clsx"
import clsx from 'clsx'
import { useState, useEffect } from 'react'

export function TimelineElement({ title, description, button, time, link, classCondition }) {
return (
<li className="mb-10 ml-6">
<span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
<svg aria-hidden="true" className="w-3 h-3 text-green-800 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd"></path>
</svg>
</span>
<h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
<time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
<p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
<a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>{button}</a>
</li>
)
export function TimelineElement({
title,
description,
button,
time,
link,
classCondition,
}) {
const [isExpanded, setIsExpanded] = useState(false)
const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth <= 768)
}

checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
}, [])

return (
<li className="mb-10 ml-6">
<span className="absolute -left-3 flex h-6 w-6 scale-150 items-center justify-center rounded-full bg-green-100 ring-8 ring-white dark:bg-yellow-900 dark:ring-zinc-900">
<svg
aria-hidden="true"
className="h-3 w-3 text-green-800 dark:text-yellow-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
></path>
</svg>
</span>

<h3 className="mb-1 ml-2 flex items-center font-mono text-xl font-bold tracking-tighter text-gray-900 dark:text-white">
{title}
</h3>
<time className="mb-2 block font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
{time}
</time>

{isMobile ? (
<>
<div className="mb-4">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="mb-2 font-mono text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
>
{isExpanded ? 'See Less' : 'See More'}
</button>
{isExpanded && (
<p className="mt-2 ml-2 font-mono text-base font-normal tracking-tight text-gray-500 dark:text-gray-400">
{description}
</p>
)}
</div>
</>
) : (
<p className="mb-4 ml-2 font-mono text-base font-normal tracking-tight text-gray-500 dark:text-gray-400">
{description}
</p>
)}

<div className="mt-4">
<a
href={link}
className={clsx(
classCondition,
'inline-flex items-center rounded-lg border-2 border-gray-200 bg-white px-4 py-2 font-mono text-sm font-bold text-gray-900 hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:text-green-700 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-zinc-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700'
)}
>
{button}
</a>
</div>
</li>
)
}