-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from HunnySajid/feat/items-ui
Feat/items UI
- Loading branch information
Showing
18 changed files
with
671 additions
and
152 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import logo from "@assets/img/128_keri_logo.png"; | ||
|
|
||
| interface IAppbar {} | ||
|
|
||
| export function Appbar(props: IAppbar): JSX.Element { | ||
| return ( | ||
| <nav className="bg-white border-gray-200 dark:bg-gray-900 p-2"> | ||
| <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto"> | ||
| <a | ||
| href="https://github.com/WebOfTrust/signify-browser-extension" | ||
| className="flex items-center space-x-3 rtl:space-x-reverse" | ||
| > | ||
| <img src={logo} className="h-8" alt="logo" /> | ||
| <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"> | ||
| KERI | ||
| </span> | ||
| </a> | ||
| </div> | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| interface ICredential { | ||
| credential: any; | ||
| } | ||
|
|
||
| export function CredentialCard({ credential }: ICredential): JSX.Element { | ||
| return ( | ||
| <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900"> | ||
| <div className="mb-2 flex flex-row justify-between"> | ||
| <div> | ||
| <p className="font-bold text-lg text-gray-dark"> | ||
| {credential.schema.title} | ||
| </p> | ||
| <p className="font-normal text-md text-gray"> | ||
| {credential.schema.credentialType} | ||
| </p> | ||
| </div> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <div className="mb-2"> | ||
| {/* <p className="font-bold text-lg text-gray-dark">Name</p> */} | ||
| <p className="font-normal text-md text-gray"> | ||
| {credential.schema.description} | ||
| </p> | ||
| </div> | ||
| <div className="mb-2 flex flex-row justify-between"> | ||
| <div className=""> | ||
| <p className="font-bold text-gray text-lg">November 08, 2023</p> | ||
| </div> | ||
| {credential.status?.et === "iss" ? ( | ||
| <div className="flex flex-col items-center text-green"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" | ||
| /> | ||
| </svg> | ||
| <p>Valid</p> | ||
| </div> | ||
| ) : ( | ||
| <div className="flex flex-col items-center text-red"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" | ||
| /> | ||
| </svg> | ||
| <p>Revoked</p> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { CredentialCard } from "@components/credentialCard"; | ||
| import { IMessage } from "@pages/background/types"; | ||
|
|
||
| export function CredentialList(): JSX.Element { | ||
| const [credentials, setCredentials] = useState([]); | ||
| const fetchCredentials = async () => { | ||
| const { data } = await chrome.runtime.sendMessage<IMessage<void>>({ | ||
| type: "fetch-resource", | ||
| subtype: "credentials", | ||
| }); | ||
| console.log("credentials", data); | ||
| setCredentials(data.credentials); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| fetchCredentials(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| {credentials.map((credential, index) => ( | ||
| <div key={index} className="my-2 mx-4"> | ||
| <CredentialCard credential={credential} /> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| interface IIdentifier {} | ||
|
|
||
| export function IdentifierCard({ aid }): JSX.Element { | ||
| return ( | ||
| <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900"> | ||
| <div className="mb-3 flex flex-row justify-between"> | ||
| <div> | ||
| <p className=" mb-1 font-bold text-gray-dark">Alias:</p> | ||
| <p className="font-normal text-gray">{aid.name}</p> | ||
| </div> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| className="w-6 h-6" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
|
|
||
| <div className="mb-3"> | ||
| <p className=" mb-1 font-bold text-gray-dark">ID:</p> | ||
| <p className="font-normal text-gray">{aid.prefix}</p> | ||
| </div> | ||
| <div className="mb-3 flex flex-row justify-between"> | ||
| <div className=""> | ||
| <p className=" mb-1 font-bold text-gray-dark"> | ||
| Credentials Received: | ||
| </p> | ||
| <p className="font-normal text-gray">13</p> | ||
| </div> | ||
| <div className=""> | ||
| <p className=" mb-1 font-bold text-gray-dark">Last Used:</p> | ||
| <p className="font-normal text-gray">November 08, 2023</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import { IdentifierCard } from "@components/identifierCard"; | ||
| import { IMessage } from "@pages/background/types"; | ||
|
|
||
| export function IdentifierList(): JSX.Element { | ||
| const [aids, setAids] = useState([]); | ||
| const fetchIdentifiers = async () => { | ||
| const { data } = await chrome.runtime.sendMessage<IMessage<void>>({ | ||
| type: "fetch-resource", | ||
| subtype: "identifiers", | ||
| }); | ||
| console.log("data", data); | ||
| setAids(data.aids); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| fetchIdentifiers(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| {aids.map((aid, index) => ( | ||
| <div key={index} className="my-2 mx-4"> | ||
| <IdentifierCard aid={aid} /> | ||
| </div> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.