refactor Slideover
This commit is contained in:
Nathan Wang
parent
b883bc9646
commit
940eda8d2f
|
|
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||||
import Transition from './Transition';
|
import Transition from './Transition';
|
||||||
import { ModuleInfo } from '../module';
|
import { ModuleInfo } from '../module';
|
||||||
import { divisionLabels } from '../../content/ordering';
|
import { divisionLabels } from '../../content/ordering';
|
||||||
|
import Slideover from './Slideover/Slideover';
|
||||||
|
|
||||||
export default function ReportIssueSlideover({
|
export default function ReportIssueSlideover({
|
||||||
isOpen,
|
isOpen,
|
||||||
|
|
@ -21,284 +22,220 @@ export default function ReportIssueSlideover({
|
||||||
else setIssueLocation('');
|
else setIssueLocation('');
|
||||||
}, [activeModule]);
|
}, [activeModule]);
|
||||||
return (
|
return (
|
||||||
<Transition show={isOpen} timeout={700}>
|
<Slideover
|
||||||
<div className="fixed inset-0 overflow-hidden">
|
isOpen={isOpen}
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
onClose={onClose}
|
||||||
<Transition
|
title="Report an Issue"
|
||||||
enter="ease-in-out duration-500"
|
subtitle="If you encounter an error while using the website, please fill out the form below. Thank you!"
|
||||||
enterFrom="opacity-0"
|
footerButtons={
|
||||||
enterTo="opacity-100"
|
<>
|
||||||
leave="ease-in-out duration-500"
|
<span className="inline-flex rounded-md shadow-sm">
|
||||||
leaveFrom="opacity-100"
|
<button
|
||||||
leaveTo="opacity-0"
|
type="button"
|
||||||
>
|
className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
|
||||||
<div
|
|
||||||
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
/>
|
|
||||||
</Transition>
|
|
||||||
|
|
||||||
<section className="absolute inset-y-0 pl-16 max-w-full right-0 flex">
|
|
||||||
<Transition
|
|
||||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
|
||||||
enterFrom="translate-x-full"
|
|
||||||
enterTo="translate-x-0"
|
|
||||||
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
|
||||||
leaveFrom="translate-x-0"
|
|
||||||
leaveTo="translate-x-full"
|
|
||||||
>
|
>
|
||||||
<div className="w-screen max-w-md">
|
Cancel
|
||||||
<div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
|
</button>
|
||||||
<div className="flex-1 h-0 overflow-y-auto">
|
</span>
|
||||||
<header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
|
<span className="inline-flex rounded-md shadow-sm">
|
||||||
<div className="flex items-center justify-between space-x-3">
|
<button
|
||||||
<h2 className="text-lg leading-7 font-medium text-white">
|
type="submit"
|
||||||
Report an Issue
|
className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
|
||||||
</h2>
|
>
|
||||||
<div className="h-7 flex items-center">
|
Submit Report
|
||||||
<button
|
</button>
|
||||||
aria-label="Close panel"
|
</span>
|
||||||
className="text-blue-200 hover:text-white"
|
</>
|
||||||
onClick={onClose}
|
}
|
||||||
>
|
>
|
||||||
<svg
|
<div className="px-4 divide-y divide-gray-200 sm:px-6">
|
||||||
className="h-6 w-6"
|
<div className="space-y-6 pt-6 pb-5">
|
||||||
fill="none"
|
<div className="space-y-1">
|
||||||
viewBox="0 0 24 24"
|
<label
|
||||||
stroke="currentColor"
|
htmlFor="issue_name"
|
||||||
>
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
<path
|
>
|
||||||
strokeLinecap="round"
|
Name (Optional)
|
||||||
strokeLinejoin="round"
|
</label>
|
||||||
strokeWidth="2"
|
<div className="relative rounded-md shadow-sm">
|
||||||
d="M6 18L18 6M6 6l12 12"
|
<input
|
||||||
/>
|
id="issue_name"
|
||||||
</svg>
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
</button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="space-y-1">
|
||||||
<p className="text-sm leading-5 text-blue-300">
|
<label
|
||||||
If you encounter an error while using the website,
|
htmlFor="issue_email"
|
||||||
please fill out the form below. Thank you!
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
</p>
|
>
|
||||||
</div>
|
Email (Optional)
|
||||||
</header>
|
</label>
|
||||||
<div className="flex-1 flex flex-col justify-between">
|
<div className="relative rounded-md shadow-sm">
|
||||||
<div className="px-4 divide-y divide-gray-200 sm:px-6">
|
<input
|
||||||
<div className="space-y-6 pt-6 pb-5">
|
id="issue_email"
|
||||||
<div className="space-y-1">
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
<label
|
type="email"
|
||||||
htmlFor="issue_name"
|
/>
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
</div>
|
||||||
>
|
</div>
|
||||||
Name (Optional)
|
<div className="space-y-1">
|
||||||
</label>
|
<label
|
||||||
<div className="relative rounded-md shadow-sm">
|
htmlFor="issue_location"
|
||||||
<input
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
id="issue_name"
|
>
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
Issue Location
|
||||||
/>
|
</label>
|
||||||
</div>
|
<div className="relative rounded-md shadow-sm">
|
||||||
</div>
|
<input
|
||||||
<div className="space-y-1">
|
id="issue_location"
|
||||||
<label
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
htmlFor="issue_email"
|
value={issueLocation}
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
onChange={e => setIssueLocation(e.target.value)}
|
||||||
>
|
/>
|
||||||
Email (Optional)
|
</div>
|
||||||
</label>
|
</div>
|
||||||
<div className="relative rounded-md shadow-sm">
|
<fieldset className="space-y-2">
|
||||||
<input
|
<legend className="text-sm leading-5 font-medium text-gray-900">
|
||||||
id="issue_email"
|
Issue Type
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
</legend>
|
||||||
type="email"
|
<div className="space-y-3">
|
||||||
/>
|
<div>
|
||||||
</div>
|
<div className="relative flex items-start">
|
||||||
</div>
|
<div className="absolute flex items-center h-5">
|
||||||
<div className="space-y-1">
|
<input
|
||||||
<label
|
id="type_typo"
|
||||||
htmlFor="issue_location"
|
type="radio"
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
name="type"
|
||||||
>
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
Issue Location
|
/>
|
||||||
</label>
|
|
||||||
<div className="relative rounded-md shadow-sm">
|
|
||||||
<input
|
|
||||||
id="issue_location"
|
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
|
||||||
value={issueLocation}
|
|
||||||
onChange={e => setIssueLocation(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<fieldset className="space-y-2">
|
|
||||||
<legend className="text-sm leading-5 font-medium text-gray-900">
|
|
||||||
Issue Type
|
|
||||||
</legend>
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="type_typo"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="type_typo"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Typo
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_broken-link"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_broken-link"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Broken Link
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_unclear-explanation"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_unclear-explanation"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Unclear Explanation
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_suggestion"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_suggestion"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Suggestion
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_website"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_website"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Website Bug
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative flex items-start">
|
|
||||||
<div className="absolute flex items-center h-5">
|
|
||||||
<input
|
|
||||||
id="issue_other"
|
|
||||||
type="radio"
|
|
||||||
name="type"
|
|
||||||
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="pl-7 text-sm leading-5">
|
|
||||||
<label
|
|
||||||
htmlFor="issue_other"
|
|
||||||
className="font-medium text-gray-900"
|
|
||||||
>
|
|
||||||
Other
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label
|
|
||||||
htmlFor="description"
|
|
||||||
className="block text-sm font-medium leading-5 text-gray-900"
|
|
||||||
>
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<div className="relative rounded-md shadow-sm">
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
rows={4}
|
|
||||||
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
|
<div className="pl-7 text-sm leading-5">
|
||||||
<span className="inline-flex rounded-md shadow-sm">
|
<label
|
||||||
<button
|
htmlFor="type_typo"
|
||||||
type="button"
|
className="font-medium text-gray-900"
|
||||||
className="py-2 px-4 border border-gray-300 rounded-md text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
|
>
|
||||||
onClick={onClose}
|
Typo
|
||||||
>
|
</label>
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
<span className="inline-flex rounded-md shadow-sm">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition duration-150 ease-in-out"
|
|
||||||
>
|
|
||||||
Submit Report
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
<div>
|
||||||
</section>
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_broken-link"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_broken-link"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Broken Link
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_unclear-explanation"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_unclear-explanation"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Unclear Explanation
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_suggestion"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_suggestion"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Suggestion
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_website"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_website"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Website Bug
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative flex items-start">
|
||||||
|
<div className="absolute flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="issue_other"
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
className="form-radio h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pl-7 text-sm leading-5">
|
||||||
|
<label
|
||||||
|
htmlFor="issue_other"
|
||||||
|
className="font-medium text-gray-900"
|
||||||
|
>
|
||||||
|
Other
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label
|
||||||
|
htmlFor="description"
|
||||||
|
className="block text-sm font-medium leading-5 text-gray-900"
|
||||||
|
>
|
||||||
|
Description
|
||||||
|
</label>
|
||||||
|
<div className="relative rounded-md shadow-sm">
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
rows={4}
|
||||||
|
className="form-input block w-full sm:text-sm sm:leading-5 transition ease-in-out duration-150"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Slideover>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
92
src/components/Slideover/Slideover.tsx
Normal file
92
src/components/Slideover/Slideover.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import Transition from '../Transition';
|
||||||
|
|
||||||
|
type SlideoverProps = {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: Function;
|
||||||
|
title: React.ReactNode;
|
||||||
|
subtitle: React.ReactNode;
|
||||||
|
children: React.ReactNode;
|
||||||
|
footerButtons: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Slideover(props: SlideoverProps) {
|
||||||
|
return (
|
||||||
|
<Transition show={props.isOpen} timeout={700}>
|
||||||
|
<div className="fixed inset-0 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<Transition
|
||||||
|
enter="ease-in-out duration-500"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="ease-in-out duration-500"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||||||
|
onClick={() => props.onClose()}
|
||||||
|
/>
|
||||||
|
</Transition>
|
||||||
|
|
||||||
|
<section className="absolute inset-y-0 pl-16 max-w-full right-0 flex">
|
||||||
|
<Transition
|
||||||
|
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||||
|
enterFrom="translate-x-full"
|
||||||
|
enterTo="translate-x-0"
|
||||||
|
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||||
|
leaveFrom="translate-x-0"
|
||||||
|
leaveTo="translate-x-full"
|
||||||
|
>
|
||||||
|
<div className="w-screen max-w-md">
|
||||||
|
<div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
|
||||||
|
<div className="flex-1 h-0 overflow-y-auto">
|
||||||
|
<header className="space-y-1 py-6 px-4 bg-blue-700 sm:px-6">
|
||||||
|
<div className="flex items-center justify-between space-x-3">
|
||||||
|
<h2 className="text-lg leading-7 font-medium text-white">
|
||||||
|
{props.title}
|
||||||
|
</h2>
|
||||||
|
<div className="h-7 flex items-center">
|
||||||
|
<button
|
||||||
|
aria-label="Close panel"
|
||||||
|
className="text-blue-200 hover:text-white"
|
||||||
|
onClick={() => props.onClose()}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm leading-5 text-blue-300">
|
||||||
|
{props.subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div className="flex-1 flex flex-col justify-between">
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
|
||||||
|
{props.footerButtons}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in a new issue