github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Styled the examples overview modal

Browse Source
This commit is contained in:
D-K-P
2023-02-14 18:15:31 +00:00
parent 7af88c33da
commit 727ec22fee
1 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/components/templates/ExampleOverview.tsx
+35 -32
View File
@@ -37,45 +37,48 @@ export function ExampleOverview({
show={isOpen}
as={Fragment}
>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4">
<StyledDialog.Panel className="mx-auto flex max-w-3xl items-start gap-2 overflow-hidden">
<div className="flex h-full w-full flex-col overflow-hidden rounded-md bg-slate-800 text-left">
<div className="flex flex-col items-center justify-between gap-4 border-b border-slate-850/80 bg-slate-700/30 px-4 py-12">
<StyledDialog.Panel className="top-0 mx-auto flex max-h-[90vh] max-w-5xl flex-row items-start gap-2 overflow-hidden overflow-y-auto rounded-md p-4">
<div className="h-full max-h-[80vh] w-full flex-col overflow-scroll rounded-md bg-slate-800 text-left">
<div className="flex flex-row gap-y-4 p-6">
<div className="flex flex-col">
<CodeBlock
code={openProject.code(environment.apiKey)}
align="top"
maxHeight="700px"
className="flex overflow-scroll w-[650px]"
/>
</div>
<div className="flex w-80 flex-col gap-y-4 pl-4">
<div className="flex flex-col items-start justify-start gap-y-4 border-b border-slate-850/80 bg-slate-700/30 px-4 py-4">
{openProject.icon}
<Header2 size="regular" className="font-semibold">
{openProject.name}
</Header2>
</div>
<div className="p-6">
<Header2 size="regular" className="font-semibold">
{openProject.title}
</Header2>
<Body>{openProject.description}</Body>
<CodeBlock
code={openProject.code(environment.apiKey)}
align="top"
/>
<PrimaryButton
className="mt-2 w-full"
onClick={() => {
setOpenProject(null);
onSelectedProject(openProject);
}}
>
Use this example
</PrimaryButton>
</div>
<Header2 size="regular" className="font-semibold">
{openProject.title}
</Header2>
<Body>{openProject.description}</Body>
<PrimaryButton
className="mt-2 w-full"
onClick={() => {
setOpenProject(null);
onSelectedProject(openProject);
}}
>
Use this example
</PrimaryButton>
</div>
<button
onClick={() => setOpenProject(null)}
className="sticky top-0 text-slate-600 transition hover:text-slate-500"
>
<XCircleIcon className="h-10 w-10" />
</button>
</StyledDialog.Panel>
</div>
</div>
</div>
<button
onClick={() => setOpenProject(null)}
className="sticky top-0 text-slate-600 transition hover:text-slate-500"
>
<XCircleIcon className="h-10 w-10" />
</button>
</StyledDialog.Panel>
</StyledDialog.Dialog>
)}
<>