Skip to content

Commit

Permalink
Keeping the footer from being rendered on the quiz pages and optimize…
Browse files Browse the repository at this point in the history
…d quiz for mobile.
  • Loading branch information
malikpiara committed Jun 18, 2024
1 parent c1df1e3 commit 4ccf5b8
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 123 deletions.
2 changes: 1 addition & 1 deletion components/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Button = ({ label, ...props }: ButtonProps) => {
<>
<button
type='button'
className={`text-white font-semibold rounded-full text-sm px-7 py-2.5 me-2 mb-2 ${
className={`text-white w-full font-semibold rounded-md text-sm px-7 py-2.5 mb-2 ${
props.disabled
? ' bg-gray-200 cursor-not-allowed'
: 'bg-primaryColor hover:opacity-90'
Expand Down
236 changes: 120 additions & 116 deletions components/footer.tsx
Original file line number Diff line number Diff line change
@@ -1,131 +1,135 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function Footer() {
return (
<footer className='p-4 mt-4 bg-white sm:p-6'>
<div className='mx-auto max-w-screen-xl'>
<div className='md:flex md:justify-between'>
<div className='mb-6 md:mb-0'>
<Link href='https://logicola.org' className='flex items-center'>
{/* <img
const pathname = usePathname();
if (!pathname.includes('quiz'))
return (
<footer className='p-4 mt-4 bg-white sm:p-6'>
<div className='mx-auto max-w-screen-xl'>
<div className='md:flex md:justify-between'>
<div className='mb-6 md:mb-0'>
<Link href='https://logicola.org' className='flex items-center'>
{/* <img
src='https://flowbite.com/docs/images/logo.svg'
className='mr-3 h-8'
alt='FlowBite Logo'
/> */}
<span className='self-center text-2xl font-bold whitespace-nowrap font-stretch'>
LogiCola
</span>
</Link>
</div>
<div className='grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3'>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Resources
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://harrycola.com/lc/index.htm'
className='hover:underline'
>
Classic Logicola
</Link>
</li>
<li>
<Link
href='https://www.routledge.com/Introduction-to-Logic/Gensler/p/book/9781138910591'
className='hover:underline'
>
Get the Book
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Follow us
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://github.com/malikpiara/logicola'
className='hover:underline '
>
Github
</Link>
</li>
<li>
<Link
href='https://twitter.com/LogicolaWeb'
className='hover:underline'
>
Twitter
</Link>
</li>
</ul>
<span className='self-center text-2xl font-bold whitespace-nowrap font-stretch'>
LogiCola
</span>
</Link>
</div>
<div>
<h2 className='mb-6 text-sm font-semibold text-gray-900 uppercase font-stretch'>
Legal
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link href='#' className='hover:underline'>
Privacy Policy
</Link>
</li>
<li>
<Link href='#' className='hover:underline'>
Terms &amp; Conditions
</Link>
</li>
</ul>
<div className='grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3'>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Resources
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://harrycola.com/lc/index.htm'
className='hover:underline'
>
Classic Logicola
</Link>
</li>
<li>
<Link
href='https://www.routledge.com/Introduction-to-Logic/Gensler/p/book/9781138910591'
className='hover:underline'
>
Get the Book
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Follow us
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://github.com/malikpiara/logicola'
className='hover:underline '
>
Github
</Link>
</li>
<li>
<Link
href='https://twitter.com/LogicolaWeb'
className='hover:underline'
>
Twitter
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 text-sm font-semibold text-gray-900 uppercase font-stretch'>
Legal
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link href='#' className='hover:underline'>
Privacy Policy
</Link>
</li>
<li>
<Link href='#' className='hover:underline'>
Terms &amp; Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr className='my-6 border-gray-200 sm:mx-auto lg:my-8' />
<div className='sm:flex sm:items-center sm:justify-between'>
<span className='text-sm text-gray-500 sm:text-center '>
© 2024{' '}
<Link href='https://logicola.com' className='hover:underline'>
Logicola
</Link>
. Some Rights Reserved.
</span>
<div className='flex mt-4 space-x-6 sm:justify-center sm:mt-0'>
<Link
href='https://twitter.com/LogicolaWeb'
className='text-gray-500 hover:text-gray-900'
>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
<hr className='my-6 border-gray-200 sm:mx-auto lg:my-8' />
<div className='sm:flex sm:items-center sm:justify-between'>
<span className='text-sm text-gray-500 sm:text-center '>
© 2024{' '}
<Link href='https://logicola.com' className='hover:underline'>
Logicola
</Link>
. Some Rights Reserved.
</span>
<div className='flex mt-4 space-x-6 sm:justify-center sm:mt-0'>
<Link
href='https://twitter.com/LogicolaWeb'
className='text-gray-500 hover:text-gray-900'
>
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
</svg>
</Link>
<a
href='https://github.com/malikpiara/logicola'
className='text-gray-500 hover:text-gray-900'
>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
</svg>
</Link>
<a
href='https://github.com/malikpiara/logicola'
className='text-gray-500 hover:text-gray-900'
>
<path
fillRule='evenodd'
d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
clipRule='evenodd'
/>
</svg>
</a>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path
fillRule='evenodd'
d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
clipRule='evenodd'
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
);
</footer>
);
}
12 changes: 6 additions & 6 deletions components/quiz/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
DrawerTitle,

Check failure on line 19 in components/quiz/index.tsx

View workflow job for this annotation

GitHub Actions / test (18.x)

'DrawerTitle' is defined but never used
DrawerTrigger,

Check failure on line 20 in components/quiz/index.tsx

View workflow job for this annotation

GitHub Actions / test (18.x)

'DrawerTrigger' is defined but never used
} from '@/components/ui/drawer';
import { SkeletonCard } from '../ui/skeletonCard';

export interface QuizProps {
chapter: Chapter;
Expand Down Expand Up @@ -175,21 +174,21 @@ const Quiz: React.FC<QuizProps> = ({ chapter }) => {
dismissible={false}
open
modal={false}
snapPoints={['150px', '450px']}
snapPoints={['180px', '460px', 1]}
activeSnapPoint={snap}
setActiveSnapPoint={setSnap}
>
<DrawerContent className='fixed flex flex-col bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[97%] mx-[-1px]'>
<DrawerHeader>
<div className='left-0 z-50 w-full h-16 bg-white flex items-center justify-between'>
<div className='ml-5'>
<div className='left-0 z-50 w-full h-24 bg-white flex items-center justify-center md:justify-between'>
<div className='ml-0 md:ml-5'>
{!showStartScreen && !showEndScreen && <KeyboardKeys />}
</div>
<div className='flex justify-end gap-5 items-center h-full align-bottom text-gray-800 font-medium'>
<div className='flex justify-between gap-5 items-center h-full align-bottom text-gray-800 font-medium flex-col md:flex-row w-full md:w-fit'>
{!showStartScreen && !showEndScreen && (
<div className='flex'>{questionCounter} of 10</div>
)}
<div className='flex h-max'>
<div className='flex h-max w-full md:w-fit'>
{!showSolution && !showStartScreen && !showEndScreen && (
<Button
label='Check Answer'
Expand All @@ -207,6 +206,7 @@ const Quiz: React.FC<QuizProps> = ({ chapter }) => {
</div>
</div>
</DrawerHeader>

<div className='flex flex-col justify-center gap-10 mx-4 md:mx-8 text-gray-500'>
<div>
<h3 className='text-2xl font-semibold text-gray-800'>
Expand Down

0 comments on commit 4ccf5b8

Please sign in to comment.