Skip to content

Commit

Permalink
Port <ResourceModal> (part of <ListResources>) to App Router [#1066]
Browse files Browse the repository at this point in the history
* move styling from styled components to CSS module
* refactor <ResourceModal> to `useContext` and `useCallback` to build
  `dismissModal()` function, rather than passing it in — this was
  necessary because all props of React Client Components need to be
  serializable (i.e., not functions), and <ResourceModal> needs to
  "use client" because it depends on `useState` and `useEffect`
* refactor the `_draw` function out into a distinct
  file (`modal_draw.js`) to reflect the lack of typing in that code (I
  briefly explored converting that file to Typescript and concluded
  the juice was not worth the squeeze)
  * note that this also means we don't need to add @types/d3 to
    devDependencies
  • Loading branch information
genehack committed Feb 25, 2025
1 parent da0eb3a commit c3a0fde
Show file tree
Hide file tree
Showing 3 changed files with 472 additions and 343 deletions.
28 changes: 28 additions & 0 deletions static-site/components/list-resources/modal.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.background {
left: 0;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: fixed;
top: 0;
}

.modalContainer {
background-color: #fff;
border: 2px solid black;
font-size: 18px;
left: 10%;
max-width: 80%;
min-height: 80%;
min-width: 80%;
padding: 20px;
position: fixed;
top: 10%;
z-index: 100;
}

.title {
font-size: 20px;
font-weight: 500;
padding-bottom: 15px;
}
Loading

0 comments on commit c3a0fde

Please sign in to comment.