Skip to content

Commit

Permalink
Add sandbox
Browse files Browse the repository at this point in the history
  • Loading branch information
bb-face committed Apr 23, 2024
1 parent f9ebb89 commit 982c1e2
Show file tree
Hide file tree
Showing 8 changed files with 632 additions and 65 deletions.
122 changes: 122 additions & 0 deletions apps/video.every.near/widget/Library/Broadcast.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
const Container = styled.div`
display: flex;
flex-direction: column;
gap: 32px;
h1 {
color: #292c2a;
font-family: Poppins;
font-size: 24px;
font-weight: 500;
line-height: 130%; /* 31.2px */
letter-spacing: -0.48px;
margin: 0;
}
`;

const Heading = styled.h3`
color: #292c2a;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 150%; /* 27px */
letter-spacing: -0.18px;
margin-bottom: 8px;
`;

const PreviewContent = styled.div`
grid-column: span 9 / span 9;
border-radius: 24px;
border: 1px solid #c7c7c7;
padding: 4rem;
word-break: normal;
`;

const WidgetCode = `
\`\`\`js
<Widget
src={"efiz.near/widget/Livepeer.Player"}
props={{
title: "Original Keyboard Cat!",
playbackId: "8b3bdqjtdj4jsjwa",
PosterImage: <img src="https://example.com" alt={"Original Keyboard Cat!"} />
}}
/>
\`\`\`
`;

const UsageContent = styled.div`
pre {
div {
padding: 1.5rem !important;
border-radius: 1.5rem;
}
}
`;

const PoweredBy = styled.h3`
display: flex;
align-items: center;
gap: 4px;
color: #a5a5a5 !important;
font-family: Poppins;
font-size: 12px !important;
line-height: 140% !important; /* 16.8px */
font-weight: 400 !important;
letter-spacing: -0.12px !important;
margin-bottom: 8px !important;
img {
height: 12px;
width: auto;
object-fit: cover;
}
`;

const PropertiesContent = styled.div`
grid-column: span 9 / span 9;
border-radius: 24px;
border: 1px solid #c7c7c7;
padding: 1rem;
word-break: normal;
overflow-x: scroll;
table {
border-radius: 24px;
overflow: hidden;
}
`;

return (
<Container>
<div>
<PoweredBy>
Powered by
<img src="https://ipfs.near.social/ipfs/bafkreia4rl6nknogzwwcj5qjladmgytyufxyl56fgr6nfjbwc6l5f6in4y" />
</PoweredBy>
<h1
style={{
fontSize: "28px",
fontWeight: "",
}}
>
Broadcast
</h1>
</div>
<div>
<Heading> Preview </Heading>
<PreviewContent>
<Widget src="video.every.near/widget/Broadcast.Broadcast" />
</PreviewContent>
</div>
<div>
<Heading>Description</Heading>
<p>This component...</p>
</div>
<UsageContent>
<Heading>Usage</Heading>
<Markdown text={WidgetCode} />
</UsageContent>
</Container>
);
122 changes: 122 additions & 0 deletions apps/video.every.near/widget/Library/DirectUploadAsset.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
const Container = styled.div`
display: flex;
flex-direction: column;
gap: 32px;
h1 {
color: #292c2a;
font-family: Poppins;
font-size: 24px;
font-weight: 500;
line-height: 130%; /* 31.2px */
letter-spacing: -0.48px;
margin: 0;
}
`;

const Heading = styled.h3`
color: #292c2a;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 150%; /* 27px */
letter-spacing: -0.18px;
margin-bottom: 8px;
`;

const PreviewContent = styled.div`
grid-column: span 9 / span 9;
border-radius: 24px;
border: 1px solid #c7c7c7;
padding: 4rem;
word-break: normal;
`;

const WidgetCode = `
\`\`\`js
<Widget
src={"efiz.near/widget/Livepeer.Player"}
props={{
title: "Original Keyboard Cat!",
playbackId: "8b3bdqjtdj4jsjwa",
PosterImage: <img src="https://example.com" alt={"Original Keyboard Cat!"} />
}}
/>
\`\`\`
`;

const UsageContent = styled.div`
pre {
div {
padding: 1.5rem !important;
border-radius: 1.5rem;
}
}
`;

const PoweredBy = styled.h3`
display: flex;
align-items: center;
gap: 4px;
color: #a5a5a5 !important;
font-family: Poppins;
font-size: 12px !important;
line-height: 140% !important; /* 16.8px */
font-weight: 400 !important;
letter-spacing: -0.12px !important;
margin-bottom: 8px !important;
img {
height: 12px;
width: auto;
object-fit: cover;
}
`;

const PropertiesContent = styled.div`
grid-column: span 9 / span 9;
border-radius: 24px;
border: 1px solid #c7c7c7;
padding: 1rem;
word-break: normal;
overflow-x: scroll;
table {
border-radius: 24px;
overflow: hidden;
}
`;

return (
<Container>
<div>
<PoweredBy>
Powered by
<img src="https://ipfs.near.social/ipfs/bafkreia4rl6nknogzwwcj5qjladmgytyufxyl56fgr6nfjbwc6l5f6in4y" />
</PoweredBy>
<h1
style={{
fontSize: "28px",
fontWeight: "",
}}
>
DirectUploadAsset
</h1>
</div>
<div>
<Heading> Preview </Heading>
<PreviewContent>
<Widget src="video.every.near/widget/Player.DirectUploadAsset" />
</PreviewContent>
</div>
<div>
<Heading>Description</Heading>
<p>This component...</p>
</div>
<UsageContent>
<Heading>Usage</Heading>
<Markdown text={WidgetCode} />
</UsageContent>
</Container>
);
58 changes: 0 additions & 58 deletions apps/video.every.near/widget/Library/Draggable.jsx

This file was deleted.

Loading

0 comments on commit 982c1e2

Please sign in to comment.