Show member + info on modal

package.json

@@ -22,6 +22,7 @@
     "astro": "^4.0.6",
     "astro-icon": "1.0.0-next.2",
     "crypto-js": "^4.1.1",
+    "flowbite": "^2.3.0",
     "isobject": "^4.0.0",
     "jsonld": "^5.2.0",
     "jwt-decode": "^3.0.0",

src/components/Modal.astro

@@ -0,0 +1,47 @@
+---
+const { id, title } = Astro.props;
+---
+
+<div
+  id={id}
+  tabindex="-1"
+  aria-hidden="true"
+  class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
+>
+  <div class="relative p-4 w-full max-w-2xl max-h-full">
+    <!-- Modal content -->
+    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      <!-- Modal header -->
+      <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{title}</h3>
+        <button
+          type="button"
+          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          data-modal-hide="default-modal"
+        >
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <div class="p-4 pt-0 md:p-5 space-y-4">
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
+          companies around the world are updating their terms of service agreements to comply.
+        </p>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to
+          ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as
+          possible of high-risk data breaches that could personally affect them.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

src/components/common/Members.astro

@@ -1,5 +1,6 @@
 ---
 import dataProvider from '~/config/dataProvider';
+import Modal from '../Modal.astro';
 
 export interface Props {
   associationsUris: string | [string];
@@ -14,12 +15,31 @@ const { data: associations } = await dataProvider.getMany('MembershipAssociation
 const { data: members } = await dataProvider.getMany('Person', {
   ids: associations.map((a) => a['pair:membershipActor']),
 });
+
+const { data: roles } = await dataProvider.getMany('Person', {
+  ids: [...new Set(associations.map((a) => a['pair:membershipRole']))],
+});
 ---
 
 {
-  members?.map((member) => (
-    <div class="grid gap-4 grid-cols-3">
-      <img class="w-36 h-36 rounded-full" src={member.image} alt={member['pair:label']} />
+  (
+    <div>
+      <div class="grid gap-4 grid-cols-6">
+        {associations?.map((association) => {
+          const member = members.find((m) => m.id === association['pair:membershipActor']);
+          const role = roles.find((r) => r.id === association['pair:membershipRole']);
+          return (
+            <div>
+              <a data-modal-target={member.id} data-modal-toggle={member.id}>
+                <img class="w-36 h-36 rounded-full" src={member.image} alt={member['pair:label']} />
+                <div class="text-center truncate font-bold">{member['pair:label']}</div>
+                <div class="text-center truncate">{role['pair:label']}</div>
+              </a>
+              <Modal id={member.id} title={member['pair:label']} />
+            </div>
+          );
+        })}
+      </div>
     </div>
-  ))
+  )
 }

src/layouts/Layout.astro

@@ -50,5 +50,6 @@ const { language, textDirection } = I18N;
         content-visibility: auto;
       }
     </style>
+    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
   </body>
 </html>

src/pages/organisations/[...slug].astro

@@ -67,11 +67,13 @@ const metadata = {
       <p class="flex-grow text-muted dark:text-slate-400 text-lg">
         {organization['pair:description']}
       </p>
-      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Canaux de communication</h3>
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-10 mb-2">
+        Canaux de communication
+      </h3>
       <Websites urls={organization['pair:homePage']} />
-      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Membres</h3>
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-10 mb-2">Membres</h3>
       <Members associationsUris={organization['pair:organizationOfMembership']} />
-      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Projets</h3>
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-10 mb-2">Projets</h3>
       <Projects projectsUris={organization['pair:involvedIn']} />
     </article>
   </section>

tailwind.config.cjs

@@ -1,7 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', './node_modules/flowbite/**/*.js'],
   theme: {
     extend: {
       colors: {
@@ -18,6 +18,6 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('flowbite/plugin')],
   darkMode: 'class',
 };

yarn.lock

@@ -934,6 +934,11 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.0.tgz#7d8dacb7fdef0e4387caf7396cbd77f179867d06"
   integrity sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==
 
+"@popperjs/core@^2.9.3":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rdfjs/data-model@^1.3.4":
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/@rdfjs/data-model/-/data-model-1.3.4.tgz#2b1b3e52755ab1283bf66aa2d3ac97fd8a0332c2"
@@ -2767,6 +2772,14 @@ flattie@^1.1.0:
   resolved "https://registry.yarnpkg.com/flattie/-/flattie-1.1.0.tgz#1459504209f2001c478751b4e2fb69d6b1ee3241"
   integrity sha512-xU99gDEnciIwJdGcBmNHnzTJ/w5AT+VFJOu6sTB6WM8diOYNA3Sa+K1DiEBQ7XH4QikQq3iFW1U+jRVcotQnBw==
 
+flowbite@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/flowbite/-/flowbite-2.3.0.tgz#0730e35d8b0d1dcdea26bb27d848bd9c0141cde1"
+  integrity sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==
+  dependencies:
+    "@popperjs/core" "^2.9.3"
+    mini-svg-data-uri "^1.4.3"
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -4473,6 +4486,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mini-svg-data-uri@^1.4.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 [email protected], minimatch@^9.0.1, minimatch@^9.0.3:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"