PromptPanel formatting WIP
This commit is contained in:
parent
5b449f9b3b
commit
f3e165d90e
|
@ -1,6 +1,7 @@
|
|||
import PromptEntry from './PromptEntry'
|
||||
|
||||
import { PromptInput } from "../types";
|
||||
import {useRef} from 'react';
|
||||
|
||||
interface PromptPanelProps {
|
||||
prompts: PromptInput[];
|
||||
|
@ -12,13 +13,15 @@ export default function PromptPanel({
|
|||
addPrompt,
|
||||
}: PromptPanelProps) {
|
||||
|
||||
const inputPrompt = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="w-2/3 min-h-screen p-4">
|
||||
<div className="pl-20 pt-10">
|
||||
<div className="flex flex-column">
|
||||
{prompts.map((prompt, index) => (
|
||||
<PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
|
||||
<main className="w-2/3 min-h-screen">
|
||||
<div className="pl-20">
|
||||
<div className="h-[80vh] flex flex-col justify-around pt-[5vh]">
|
||||
{prompts.slice(-6).map((prompt, index) => (
|
||||
<PromptEntry prompt={index == 5 ? "UP NEXT: " + prompt.prompt : prompt.prompt} className={promptEntryClassNames[index]} key={index} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
@ -26,13 +29,15 @@ export default function PromptPanel({
|
|||
e.preventDefault();
|
||||
const prompt = e.currentTarget.prompt.value;
|
||||
addPrompt(prompt);
|
||||
inputPrompt.current.value = '';
|
||||
}}>
|
||||
<input
|
||||
className="fixed z-90 bottom-20 w-1/2 h-12 pl-3 text-xl text-black rounded-lg border-sky-500 border-2"
|
||||
ref={inputPrompt}
|
||||
type="text"
|
||||
id="prompt"
|
||||
name="prompt"
|
||||
placeholder="What do you want to hear?"
|
||||
placeholder="What do you want to hear next?"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</form>
|
||||
|
@ -43,13 +48,13 @@ export default function 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.
|
||||
// option to use flexbox, but maybe want just static positioning instead <div className="h-screen flex flex-col justify-evenly">
|
||||
// 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 = {
|
||||
0: "pb-12 text-lg text-gray-400",
|
||||
1: "pb-1/6 text-xl text-gray-300",
|
||||
2: "pb-1/6 text-3xl text-white",
|
||||
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",
|
||||
0: "font-light text-sm text-gray-400 text-opacity-40",
|
||||
1: "font-normal text-m text-gray-300 text-opacity-60",
|
||||
2: "font-medium text-xl text-gray-200 text-opacity-80",
|
||||
3: "font-bold text-5xl text-white", // This is the primary prompt
|
||||
4: "font-medium text-2xl text-gray-200 text-opacity-80",
|
||||
5: "font-normal text-m text-gray-300 text-opacity-60",
|
||||
}
|
||||
|
|
|
@ -13,6 +13,10 @@ import * as Tone from "tone";
|
|||
const defaultPromptInputs = [
|
||||
{ prompt: "A jazz pianist playing a classical concerto"},
|
||||
{ prompt: "Taylor Swift singing with a tropical beat"},
|
||||
{ prompt: "A typewriter in the bahamas"},
|
||||
{ prompt: "Justin Bieber anger rap"},
|
||||
{ prompt: "New york city rap, with a dust storm, cinematic score, dramatic, composition"},
|
||||
{ prompt: "Jack Johnson playing a harmonica in the 1920s"},
|
||||
];
|
||||
|
||||
const defaultInferenceResults = [
|
||||
|
|
Loading…
Reference in New Issue