-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d9e3c50
commit e907393
Showing
7 changed files
with
295 additions
and
90 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
168 changes: 82 additions & 86 deletions
168
dapps/suiftly.walrus.site/packages/frontend/src/components/App.tsx
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
41 changes: 41 additions & 0 deletions
41
dapps/suiftly.walrus.site/packages/frontend/src/components/BlobIdInput.tsx
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,41 @@ | ||
| import React from 'react' | ||
| import { TextField, Button, Flex } from '@radix-ui/themes' | ||
|
|
||
| interface BlobIdInputProps { | ||
| blobId: string | ||
| defaultBlobId: string | ||
| setBlobId: (blobId: string) => void | ||
| } | ||
|
|
||
| const BlobIdInput: React.FC<BlobIdInputProps> = ({ | ||
| blobId, | ||
| defaultBlobId, | ||
| setBlobId, | ||
| }) => { | ||
| const handleReset = () => { | ||
| setBlobId(defaultBlobId) | ||
| } | ||
|
|
||
| return ( | ||
| <Flex direction="row" gap="2" width="400" align="center"> | ||
| {/*<label htmlFor="blobIdInput"> | ||
| <Text>Blob ID:</Text> | ||
| </label>*/} | ||
| <TextField.Root | ||
| size="2" | ||
| color="green" | ||
| radius="large" | ||
| value={blobId} | ||
| variant="soft" | ||
| onChange={(e) => setBlobId(e.target.value)} | ||
| placeholder={defaultBlobId} | ||
| style={{ width: '400px' }} // Set the width here | ||
| /> | ||
| {blobId !== defaultBlobId && ( | ||
| <Button onClick={handleReset}>Reset to default</Button> | ||
| )} | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default BlobIdInput |
89 changes: 89 additions & 0 deletions
89
dapps/suiftly.walrus.site/packages/frontend/src/components/DemoImage.tsx
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,89 @@ | ||
| import React, { useState } from 'react' | ||
| import { Button, Flex, Text } from '@radix-ui/themes' | ||
|
|
||
| interface DemoImageProps { | ||
| code: string | ||
| onRunCode: () => void | ||
| } | ||
|
|
||
| const DemoImage: React.FC<DemoImageProps> = ({ code, onRunCode }) => { | ||
| const [imageDisplayed, setImageDisplayed] = useState(false) | ||
|
|
||
| const handleRunCode = () => { | ||
| setImageDisplayed(true) | ||
| onRunCode() | ||
| } | ||
|
|
||
| const handleClearImage = () => { | ||
| const imageContainer = document.getElementById('image-container') | ||
| if (imageContainer) { | ||
| const existing_img = imageContainer.querySelector('img') | ||
| if (existing_img) { | ||
| imageContainer.removeChild(existing_img) | ||
| } | ||
| } | ||
| setImageDisplayed(false) | ||
| } | ||
|
|
||
| return ( | ||
| <Flex | ||
| className="demo-image-container" | ||
| direction="row" | ||
| gap="2" | ||
| align="center" | ||
| > | ||
| <Flex className="code-section" direction="column" gap="1" p="3"> | ||
| <pre | ||
| className="code-block" | ||
| style={{ | ||
| backgroundColor: '#f3f4f6', | ||
| padding: '3px', | ||
| borderRadius: '10px', | ||
| }} | ||
| > | ||
| <code>{code}</code> | ||
| </pre> | ||
| </Flex> | ||
| <Flex direction="column" gap="2" align="center"> | ||
| <Flex | ||
| id="image-container" | ||
| className="image-container" | ||
| style={{ | ||
| width: '128px', | ||
| height: '128px', | ||
| border: '1px solid #ccc', | ||
| flex: 'none', | ||
| }} | ||
| align="center" | ||
| justify="center" | ||
| > | ||
| <Text>image-container</Text> | ||
| </Flex> | ||
|
|
||
| <Flex> | ||
| {imageDisplayed ? ( | ||
| <Button | ||
| className="clear-image-button" | ||
| variant="solid" | ||
| color="red" | ||
| onClick={handleClearImage} | ||
| > | ||
| Clear Image | ||
| </Button> | ||
| ) : ( | ||
| <Button | ||
| className="run-code-button" | ||
| variant="solid" | ||
| color="blue" | ||
| onClick={handleRunCode} | ||
| > | ||
| Run Code | ||
| </Button> | ||
| )} | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default DemoImage |
25 changes: 25 additions & 0 deletions
25
dapps/suiftly.walrus.site/packages/frontend/src/components/LabeledLink.tsx
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,25 @@ | ||
| import React from 'react' | ||
| import { Flex, Text, Link } from '@radix-ui/themes' | ||
|
|
||
| interface LabeledLinkProps { | ||
| label: string | ||
| url: string | ||
| minWidthLabel?: string | ||
| } | ||
|
|
||
| const LabeledLink: React.FC<LabeledLinkProps> = ({ | ||
| label, | ||
| url, | ||
| minWidthLabel = '110px', | ||
| }) => { | ||
| return ( | ||
| <Flex direction="row" align="center" gap="1"> | ||
| <Text style={{ minWidth: minWidthLabel }}>{label} : </Text> | ||
| <Link href={url} underline="hover"> | ||
| {url} | ||
| </Link> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default LabeledLink |
21 changes: 21 additions & 0 deletions
21
dapps/suiftly.walrus.site/packages/frontend/src/components/LabeledLinkSuiftly.tsx
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 React from 'react' | ||
| import { Flex, Text, Link } from '@radix-ui/themes' | ||
|
|
||
| interface LabeledLinkProps { | ||
| label: string | ||
| blobId: string | ||
| } | ||
|
|
||
| const LabeledLinkSuiftly: React.FC<LabeledLinkProps> = ({ label, blobId }) => { | ||
| const url = `https://cdn.suiftly.io/${label}/${blobId}` | ||
| return ( | ||
| <Flex direction="row" align="center" gap="1"> | ||
| <Text>{label} : </Text> | ||
| <Link href={url} underline="hover"> | ||
| https://cdn.suiftly.io/<b>{label}</b>/{blobId} | ||
| </Link> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| export default LabeledLinkSuiftly |
Oops, something went wrong.