Skip to content

Commit

Permalink
fix: import space preview
Browse files Browse the repository at this point in the history
  • Loading branch information
fforbeck committed Sep 23, 2024
1 parent 05a88fc commit b7fa3ef
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 17 deletions.
30 changes: 20 additions & 10 deletions src/components/SpaceCreator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import Loader from '../components/Loader'
import { DID, DIDKey } from '@ucanto/interface'
import { DidIcon } from './DidIcon'
import Link from 'next/link'
import { FolderPlusIcon } from '@heroicons/react/24/outline'
import { FolderPlusIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
import Tooltip from './Tooltip'

export function SpaceCreatorCreating (): JSX.Element {
export function SpaceCreatorCreating(): JSX.Element {
return (
<div className='flex flex-col items-center space-y-4'>
<h5 className='font-epilogue'>Creating Space...</h5>
Expand All @@ -21,7 +22,7 @@ interface SpaceCreatorFormProps {
className?: string
}

export function SpaceCreatorForm ({
export function SpaceCreatorForm({
className = ''
}: SpaceCreatorFormProps): JSX.Element {
const [{ client, accounts }] = useW3()
Expand All @@ -30,11 +31,11 @@ export function SpaceCreatorForm ({
const [name, setName] = useState('')
const [space, setSpace] = useState<Space>()

function resetForm (): void {
function resetForm(): void {
setName('')
}

async function onSubmit (e: React.FormEvent<HTMLFormElement>): Promise<void> {
async function onSubmit(e: React.FormEvent<HTMLFormElement>): Promise<void> {
e.preventDefault()
if (!client) return
// TODO: account selection
Expand Down Expand Up @@ -115,7 +116,7 @@ export function SpaceCreatorForm ({
required={true}
/>
<button type='submit' className={`inline-block bg-hot-red border border-hot-red hover:bg-white hover:text-hot-red font-epilogue text-white uppercase text-sm px-6 py-2 rounded-full whitespace-nowrap`}>
<FolderPlusIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Create
<FolderPlusIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{ marginTop: -4 }} /> Create
</button>
</form>
</div>
Expand All @@ -126,7 +127,7 @@ interface SpaceCreatorProps {
className?: string
}

export function SpaceCreator ({
export function SpaceCreator({
className = ''
}: SpaceCreatorProps): JSX.Element {
const [creating, setCreating] = useState(false)
Expand All @@ -150,16 +151,25 @@ export function SpaceCreator ({
/* eslint-enable no-nested-ternary */
}

export function SpacePreview ({ did, name }: { did: DIDKey, name?: string }) {
interface SpacePreviewProps {
did: DIDKey
name?: string
capabilities: string[]
}

export function SpacePreview({ did, name, capabilities }: SpacePreviewProps) {
return (
<figure className='p-4 flex flex-row items-start gap-2 rounded'>
<Link href={`/space/${did}`} className='block'>
<DidIcon did={did} />
</Link>
<figcaption className='grow'>
<Link href={`/space/${did}`} className='block'>
<span className='font-epilogue text-lg text-hot-red font-semibold leading-5 m-0'>
{ name ?? 'Untitled'}
<span className='font-epilogue text-lg text-hot-red font-semibold leading-5 m-0 flex items-center'>
{name ?? 'Untitled'}
<Tooltip title="Capabilities" text={capabilities}>
<InformationCircleIcon className='h-5 w-5 ml-2' />
</Tooltip>
</span>
<span className='block font-mono text-xs truncate'>
{did}
Expand Down
13 changes: 6 additions & 7 deletions src/share.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -271,16 +271,15 @@ export function ImportSpace() {
</div>
</li>
</ol>
{proof && (
{proof && proof.capabilities && proof.capabilities.length > 0 && (
<div className='mt-4 pt-4'>
<Header>Added</Header>
<div className='max-w-3xl border border-hot-red rounded-2xl'>
{proof.capabilities.map((cap, i) => (
<SpacePreview
did={cap.with}
name={proof.facts.at(i)?.space.name}
key={cap.with} />
))}
<SpacePreview
did={proof.capabilities[0].with}
name={proof.facts[0]?.space.name}
capabilities={proof.capabilities.map(c => c.can)}
key={proof.capabilities[0].with} />
</div>
</div>
)}
Expand Down

0 comments on commit b7fa3ef

Please sign in to comment.