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

prop formatting

This commit is contained in:
Seth Forsgren 2022-11-24 12:39:30 -08:00
parent 45b97d63d5
commit 5b449f9b3b
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/PromptEntry.tsx
View File

@ -5,14 +5,16 @@ interface PromptEntryProps {
className: string className: string
} }
const PromptEntry = (props: PromptEntryProps) => { export default function PromptEntry({
prompt,
className,
}: PromptEntryProps) {
return ( return (
<> <>
<p className={props.className}> <p className={className}>
{props.prompt} {prompt}
</p> </p>
</> </>
) )
} }
export default PromptEntry

29
components/PromptPanel.tsx
View File

@ -1,22 +1,26 @@
import PromptEntry from './PromptEntry' import PromptEntry from './PromptEntry'
import { PromptInput } from "../types"; import { PromptInput } from "../types";
interface PromptPanelProps { interface PromptPanelProps {
prompts: PromptInput[]; prompts: PromptInput[];
addPrompt: (prompt: string) => void; addPrompt: (prompt: string) => void;
} }
const PromptPanel = (props: PromptPanelProps) => { export default function PromptPanel({
const prompts = props.prompts; prompts,
const addPrompt = props.addPrompt; addPrompt,
}: PromptPanelProps) {
return ( return (
<> <>
<main className="w-2/3 min-h-screen p-4"> <main className="w-2/3 min-h-screen p-4">
<div className="pl-20 pt-10"> <div className="pl-20 pt-10">
{prompts.map((prompt, index) => ( <div className="flex flex-column">
<PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} /> {prompts.map((prompt, index) => (
))} <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
))}
</div>
<form onSubmit={(e) => { <form onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
@ -38,13 +42,14 @@ const PromptPanel = (props: PromptPanelProps) => {
) )
} }
export default PromptPanel
// WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something. // WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something.
// need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state) // need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state)
const promptEntryClassNames = { const promptEntryClassNames = {
0: "pb-32 text-lg text-gray-400", 0: "pb-12 text-lg text-gray-400",
1: "pb-32 text-xl text-gray-300", 1: "pb-1/6 text-xl text-gray-300",
2: "pb-32 text-3xl text-white", 2: "pb-1/6 text-3xl text-white",
3: "pb-32 text-m text-gray-400", 3: "pb-1/6 text-m text-gray-400",
4: "pb-1/6 text-m text-gray-300",
5: "pb-1/6 text-m text-gray-400",
6: "pb-1/6 text-m text-gray-300",
} }