simple contact

src/.shapes/contact.shex

@@ -1,12 +1,8 @@
-
 # Platform ontologies:
-PREFIX rdf:  <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
-PREFIX owl: <http://www.w3.org/2002/07/owl#>
 PREFIX xsd:  <http://www.w3.org/2001/XMLSchema#>
-PREFIX dc: <http://purl.org/dc/terms/>
 
-# Domain ontology for Contacts in vcard-like form
+# Domain ontology for Contacts in vcard-like form and NextGraph skills
 PREFIX vcard: <http://www.w3.org/2006/vcard/ns#>
 PREFIX schem: <http://schema.org/>
 PREFIX foaf: <http://xmlns.com/foaf/0.1/>
@@ -31,5 +27,6 @@ ngc:SocialContact EXTRA a {
 ngc:HasRating {
   a [ xskills:Rating ];
     xskills:rated xsd:integer;
-    xskills:skill [ ksp:svelte ksp:nextjs ksp:react ksp:vuejs ksp:tailwind ksp:rdf ksp:rust ksp:yjs ksp:automerge ]
+    xskills:skill [ ksp:svelte ksp:nextjs ksp:react ksp:vuejs ksp:tailwind 
+    ksp:rdf ksp:rust ksp:yjs ksp:automerge ]
 }

src/ContactSimple.tsx

@@ -0,0 +1,29 @@
+import { FunctionComponent } from "react";
+import { useNextGraphAuth } from "./reactMethods";
+import { SocialContactShapeType } from "./.ldo/contact.shapeTypes.ts";
+import { useSubscribeToResource, useResource, useSubject } from "./reactMethods.ts";
+
+export const Contact: FunctionComponent = ({nuri}) => {
+  const { session } = useNextGraphAuth();
+
+  useResource(session.sessionId && nuri ? nuri : undefined, { subscribe: true });
+  let contact = useSubject(SocialContactShapeType, session.sessionId && nuri ? nuri.substring(0,53) : undefined);
+ 
+  if (!session.sessionId || !nuri) return <></>;
+  
+  return <>
+    {contact.fn? ( 
+      <div className="contact" title={nuri}>
+        <span className="name"> 
+          {contact.fn}
+        </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">
+          <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>
+        <span className="email text-left">
+          email:&nbsp;{contact.hasEmail}
+        </span>
+      </div>
+    ) : <></>}
+  </>;
+};