diff --git a/components/button.tsx b/components/button.tsx
index 826feba..5a1cef3 100644
--- a/components/button.tsx
+++ b/components/button.tsx
@@ -29,7 +29,7 @@ function ThemeToggle() {
):(
diff --git a/components/prompt-form.tsx b/components/prompt-form.tsx
index 7672ed9..5ad4fb1 100644
--- a/components/prompt-form.tsx
+++ b/components/prompt-form.tsx
@@ -1,122 +1,136 @@
-import React from "react";
-import * as Form from "@radix-ui/react-form";
-import { styled } from "@stitches/react";
+import React from 'react';
+import { useTheme } from 'next-themes';
+import * as Form from '@radix-ui/react-form';
+import { styled } from '@stitches/react';
type Props = {
- onSubmit: (prompt: string) => void;
- isGenerating: boolean;
+ onSubmit: (prompt: string) => void;
+ isGenerating: boolean;
};
+type ThemeVariants = 'dark' | 'light';
+
export const PromptForm: React.FC = ({ onSubmit, isGenerating }) => {
- const handleSubmit: React.FormEventHandler = (e) => {
- e.preventDefault();
-
- const prompt = (e.target as HTMLFormElement | undefined)?.prompt
- ?.value as string;
- onSubmit(prompt);
- };
- return (
-
-
-
- Prompt
-
- Please enter a prompt
-
-
- Please enter a valid prompt
-
-
-
-
-
-
-
-
-
-
- );
+ const { theme, resolvedTheme } = useTheme();
+ const currentTheme: ThemeVariants = (theme || resolvedTheme || 'light') as ThemeVariants;
+
+ const handleSubmit: React.FormEventHandler = (e) => {
+ e.preventDefault();
+
+ const prompt = (e.target as HTMLFormElement | undefined)?.prompt?.value as string;
+ onSubmit(prompt);
+ };
+
+ return (
+
+
+
+ Prompt
+ Please enter a prompt
+ Please enter a valid prompt
+
+
+
+
+
+
+
+ {isGenerating ? 'Generating..' : 'Start Generating'}
+
+
+
+ );
};
-const FormRoot = styled(Form.Root, {});
+const StyledFormRoot = styled(Form.Root, {});
-const FormField = styled(Form.Field, {
- display: "grid",
- marginBottom: 10,
+const StyledFormField = styled(Form.Field, {
+ display: 'grid',
+ marginBottom: 10,
});
-const FormLabel = styled(Form.Label, {
- fontSize: 15,
- fontWeight: 500,
- lineHeight: "35px",
- color: "$foreground",
+const StyledFormLabel = styled(Form.Label, {
+ fontSize: 15,
+ fontWeight: 500,
+ lineHeight: '35px',
+ color: '$foreground',
});
-const FormMessage = styled(Form.Message, {
- fontSize: 13,
- color: "$red600",
- opacity: 0.8,
+const StyledFormMessage = styled(Form.Message, {
+ fontSize: 13,
+ color: '$red600',
+ opacity: 0.8,
});
-const Flex = styled("div", { display: "flex" });
+const StyledFlex = styled('div', { display: 'flex' });
const inputStyles = {
- all: "unset",
- boxSizing: "border-box",
- width: "100%",
- display: "inline-flex",
- alignItems: "center",
- justifyContent: "center",
- borderRadius: 4,
-
- fontSize: 15,
- color: "black",
- backgroundColor: "$gray300",
- boxShadow: `0 0 0 1px $gray400`,
- "&:hover": { boxShadow: `0 0 0 1px $gray600` },
- "&:focus": { boxShadow: `0 0 0 2px $purple600` },
- "&::selection": { backgroundColor: "$gray600", color: "white" },
+ all: 'unset',
+ boxSizing: 'border-box',
+ width: '100%',
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 4,
+
+ fontSize: 15,
+ color: 'black',
+ backgroundColor: '$gray300',
+ boxShadow: '0 0 0 1px $gray400',
+ '&:hover': { boxShadow: '0 0 0 1px $gray600' },
+ '&:focus': { boxShadow: '0 0 0 2px $purple600' },
+ '&::selection': { backgroundColor: '$gray600', color: 'white' },
};
-const Input = styled("input", {
- ...inputStyles,
- height: 35,
- lineHeight: 1,
- padding: "0 10px",
+const StyledInput = styled('input', {
+ ...inputStyles,
+ height: 35,
+ lineHeight: 1,
+ padding: '0 10px',
+ variants: {
+ theme: {
+ dark: {
+ backgroundColor: '$gray600',
+ color: 'white',
+ '&::placeholder': {
+ color: 'white',
+ },
+ },
+ light: {
+ backgroundColor: '$gray300',
+ },
+ },
+ },
});
-const Button = styled("button", {
- all: "unset",
- boxSizing: "border-box",
- display: "inline-flex",
- alignItems: "center",
- justifyContent: "center",
- borderRadius: 4,
- padding: "0 15px",
- fontSize: 15,
- lineHeight: 1,
- fontWeight: 500,
- height: 35,
- width: "100%",
-
- "&:disabled": {
- opacity: 0.5,
- },
- backgroundColor: "$purple500",
- color: "white",
- boxShadow: `0 2px 10px $gray400`,
- "&:not(:disabled):hover": { backgroundColor: "$purple600" },
- "&:not(:disabled):focus": { boxShadow: `0 0 0 2px black` },
+const StyledButton = styled('button', {
+ all: 'unset',
+ boxSizing: 'border-box',
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 4,
+ padding: '0 15px',
+ fontSize: 15,
+ lineHeight: 1,
+ fontWeight: 500,
+ height: 35,
+ width: '100%',
+ cursor: 'pointer',
+
+ '&:disabled': {
+ opacity: 0.5,
+ },
+ backgroundColor: '$purple500',
+ color: 'white',
+ boxShadow: '0 2px 10px $gray400',
+ '&:not(:disabled):hover': { backgroundColor: '$purple600' },
+ '&:not(:disabled):focus': { boxShadow: '0 0 0 2px black' },
});
diff --git a/stitches.config.ts b/stitches.config.ts
index d4d8dce..9e66145 100644
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -14,7 +14,7 @@ export const {
colors: {
hiContrast: 'hsl(206,10%,5%)',
loContrast: 'white',
- background:"white",
+ background: 'white',
gray100: 'hsl(206,22%,99%)',
gray200: 'hsl(206,12%,97%)',
gray300: 'hsl(206,11%,92%)',