-
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
f7a9b53
commit 40be80f
Showing
3 changed files
with
104 additions
and
26 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
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
68 changes: 68 additions & 0 deletions
68
src/app/og/already-minted/[random]/[time]/opengraph-image.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,68 @@ | ||
import { ImageResponse } from 'next/og' | ||
|
||
// Image metadata | ||
export const alt = 'About Acme' | ||
export const size = { | ||
width: 1200, | ||
height: 630, | ||
} | ||
|
||
export const contentType = 'image/png' | ||
|
||
// Image generation | ||
export default async function Image( | ||
{ params }: { params: { time: string } } | ||
) { | ||
// Font | ||
|
||
|
||
return new ImageResponse( | ||
( | ||
// ImageResponse JSX element | ||
<div | ||
style={{ | ||
fontSize: 64, | ||
background: 'white', | ||
width: '100%', | ||
height: '100%', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
}} | ||
> | ||
<div style={{ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}}> | ||
<p>Already Minted</p> | ||
<p> | ||
<span> | ||
Come back in {params.time} hours | ||
</span> | ||
</p> | ||
</div> | ||
<div style={{ | ||
position: 'absolute', | ||
bottom: 0, | ||
fontSize: 34, | ||
textAlign: 'center', | ||
padding: '16px', | ||
background: 'rgba(0, 0, 0, 0.1)', | ||
width: '100%', | ||
display: 'flex', | ||
justifyContent: 'center', | ||
}}> | ||
Meanwhile you can share this page with your friends | ||
</div> | ||
</div> | ||
), | ||
// ImageResponse options | ||
{ | ||
// For convenience, we can re-use the exported opengraph-image | ||
// size config to also set the ImageResponse's width and height. | ||
...size, | ||
} | ||
) | ||
} |