formatting

ng-sdk-js/example-webapp-react/src/Contact.tsx

@@ -13,17 +13,17 @@ export const Contact: FunctionComponent = ({nuri}) => {
   
   return <>
     {contact.fn? ( 
-      <div
+      <div className="contact" title={nuri}>
-            className="contact"
+        <span className="name"> 
-          >
+          {contact.fn}
-            <span className="name"> {contact.fn}
+        </span>
-            </span>
+        <svg className="w-6 h-6 inline email-logo" data-slot="icon" fill="none" strokeWidth="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <svg className="w-6 h-6 inline email-logo" data-slot="icon" fill="none" strokeWidth="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"></path>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"></path>
+        </svg>
-            </svg>
+        <span className="email text-left">
-            <span className="email text-left"> email:&nbsp;{contact.hasEmail}
+          email:&nbsp;{contact.hasEmail}
-            </span>
+        </span>
-          </div>
+      </div>
     ) : <></>}
   </>;
 };

ng-sdk-js/example-webapp-react/src/Contacts.tsx

@@ -20,21 +20,19 @@ export const Contacts: FunctionComponent = () => {
   if (!session.sessionId) return <></>;
   
   return <>
-
+    <div className="centered">
-  <div className="centered">
+      <div className="flex flex-wrap justify-center gap-5 mb-10">
-    <div className="flex flex-wrap justify-center gap-5 mb-10">
+        <MakeContact/>
-    <MakeContact/>
+      </div>
-        </div>
+      <div className="flex flex-wrap justify-center gap-5 mb-10">
-    <div className="flex flex-wrap justify-center gap-5 mb-10">
+        { 
-
+          myContainer.contains?.map(
-    { 
+            (contained) => 
-        myContainer.contains?.map((contained) => 
+              <Contact key={contained["@id"]} nuri={contained["@id"]+container_overlay}/>
-            <Contact key={contained["@id"]} nuri={contained["@id"]+container_overlay}/>
+          )
-          
+        }
-    )}
+      </div>
     </div>
-  </div>
   </>;
-
 };