kudzues/qwerty-learner
1
0
Fork 0
mirror of https://github.com/RealKai42/qwerty-learner.git synced 2026-04-05 14:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: temp remove animation in infopanel

Browse Source
This commit is contained in:
KaiyiWing
2023-03-26 23:35:19 +08:00
parent 52eca4af76
commit 6cbd49bea3
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/InfoPanel/index.tsx
View File

@@ -31,47 +31,36 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ state, buttonOnclick, icon, color
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<Transition
show={state}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
<div
className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle "
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
ref={(el) => el && el.classList.add('group')}
>
{(ref) => (
<div
className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle "
ref={ref}
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
>
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div
className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md dark:bg-opacity-70 ${color} sm:mx-0 sm:h-10 sm:w-10 `}
>
<FontAwesomeIcon icon={icon} className={`h-5 w-5 stroke-current ${iconColor}`} />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">{children}</div>
</div>
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div
className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md dark:bg-opacity-70 ${color} sm:mx-0 sm:h-10 sm:w-10 `}
>
<FontAwesomeIcon icon={icon} className={`h-5 w-5 stroke-current ${iconColor}`} />
</div>
<div className="bg-gray-50 px-4 py-3 dark:bg-gray-700 dark:bg-opacity-10 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className={`inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 shadow-sm ${btnColor} text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-opacity-70 dark:text-opacity-80 sm:ml-3 sm:w-auto sm:text-sm `}
onClick={buttonOnclick}
>
{'关闭'}
</button>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">{children}</div>
</div>
)}
</Transition>
</div>
<div className="bg-gray-50 px-4 py-3 dark:bg-gray-700 dark:bg-opacity-10 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className={`inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 shadow-sm ${btnColor} text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-opacity-70 dark:text-opacity-80 sm:ml-3 sm:w-auto sm:text-sm `}
onClick={buttonOnclick}
>
{'关闭'}
</button>
</div>
</div>
</div>
</div>
)