Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add icons and floating buttons

This commit is contained in:
Hayk Martiros 2022-11-20 13:56:58 -08:00
parent 8bfa526f17
commit 050f7f519f
3 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -15,6 +15,7 @@
"next": "13.0.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"three": "^0.146.0"
},
"devDependencies": {
@ -3350,6 +3351,14 @@
"react": "^18.2.0"
}
},
"node_modules/react-icons": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
"integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -6426,6 +6435,12 @@
"scheduler": "^0.23.0"
}
},
"react-icons": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
"integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"next": "13.0.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"three": "^0.146.0"
},
"devDependencies": {

34
pages/index.tsx
View File

@ -1,9 +1,7 @@
import Head from "next/head";
import Image from "next/image";
import ThreeCanvas from "../components/ThreeCanvas";
// import styles from "../styles/Home.module.css";
import { FiSliders, FiPause } from "react-icons/fi";
export default function Home() {
return (
@ -23,13 +21,13 @@ export default function Home() {
</div>
<main className="w-2/3 min-h-screen p-4">
<h2 className="text-2xl text-center text-white text-right">
Riffusion
</h2>
<div className="pl-20">
<p className="pb-32 text-lg text-gray-400">A jazz pianist playing a classical concerto</p>
<p className="pb-32 text-xl text-gray-300">Taylor Swift with a tropical beat</p>
<div className="pl-20 pt-10">
<p className="pb-32 text-lg text-gray-400">
A jazz pianist playing a classical concerto
</p>
<p className="pb-32 text-xl text-gray-300">
Taylor Swift with a tropical beat
</p>
<p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
<p className="pb-32 text-m text-gray-400">
new york city rap, with a dust storm, cinematic score, dramatic,
@ -38,7 +36,21 @@ export default function Home() {
</div>
</main>
{/* <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> */}
<button
title="Settings"
className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
>
<FiSliders />
</button>
<button
title="Pause"
className="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
>
<FiPause />
</button>
</div>
</>
);