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

outline of share button function UI

This commit is contained in:
Seth Forsgren 2022-12-02 11:54:47 -08:00
parent a4be650d20
commit bc13225a46
3 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Pause.tsx
View File

@ -22,9 +22,9 @@ export default function Pause({
var classNameCondition = ""
if (paused) {
classNameCondition="animate-pulse fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
classNameCondition="animate-pulse fixed z-90 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
} else {
classNameCondition="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-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition="fixed z-90 top-48 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
return (

35
components/Share.tsx Normal file
View File

@ -0,0 +1,35 @@
import { useState } from "react";
import { FiShare } from "react-icons/fi";
export default function Info() {
const [open, setOpen] = useState(false);
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-90 top-28 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition = "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-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
// function that copies the current url to the clipboard and alerts the user
function copyToClipboard() {
var copyText = window.location.href
navigator.clipboard.writeText(copyText);
}
return (
<>
<button
title="Info"
data-tooltip-target="tooltip-click"
data-tooltip-trigger="click"
className={classNameCondition}
onClick={() => {
copyToClipboard()
}}
>
<FiShare />
</button>
</>
);
};

3
pages/index.tsx
View File

@ -5,6 +5,7 @@ import * as Tone from "tone";
import AudioPlayer from "../components/AudioPlayer";
import PageHead from "../components/PageHead";
import Info from "../components/Info";
import Share from "../components/Share";
import ModelInference from "../components/ModelInference";
import Pause from "../components/Pause";
import PromptPanel from "../components/PromptPanel";
@ -230,6 +231,8 @@ export default function Home() {
<Info />
<Share />
<Pause paused={paused} setPaused={setPaused} />
</div>
</>