computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
738 B
33 lines
738 B
--- |
|
import Loader from '../Loader.astro'; |
|
import './FrameRenderer.css'; |
|
import { ProgressNudge } from "./ProgressNudge"; |
|
|
|
export interface Props { |
|
resourceType: 'roadmap' | 'best-practice'; |
|
resourceId: string; |
|
dimensions?: { |
|
width: number; |
|
height: number; |
|
}; |
|
} |
|
|
|
const { resourceId, resourceType, dimensions = null } = Astro.props; |
|
--- |
|
|
|
<div |
|
id='resource-svg-wrap' |
|
style={dimensions |
|
? `--aspect-ratio:${dimensions.width}/${dimensions.height}` |
|
: null} |
|
data-resource-type={resourceType} |
|
data-resource-id={resourceId} |
|
> |
|
<div id='resource-loader'> |
|
<Loader /> |
|
</div> |
|
</div> |
|
|
|
<ProgressNudge resourceId={resourceId} resourceType={resourceType} client:only="react" /> |
|
|
|
<script src='./renderer.ts'></script>
|
|
|