Piano notes book, powered by Astro and React.
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.
 
 

30 line
491 B

  1. import * as React from 'react';
  2. export interface ScoreProps {
  3. id: string;
  4. alt: string;
  5. }
  6. export const Score: React.FC<ScoreProps> = ({
  7. id,
  8. alt,
  9. }) => {
  10. return (
  11. <div>
  12. <a href={`scores/${id}.svg`}>
  13. <figure>
  14. <img className="svg" src={`scores/${id}.svg`} alt={alt} />
  15. <figcaption>
  16. {alt}
  17. </figcaption>
  18. </figure>
  19. </a>
  20. <div className="screen-controls">
  21. <a href={`scores/${id}.musicxml`}>
  22. Download MusicXML
  23. </a>
  24. </div>
  25. </div>
  26. );
  27. };