UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Lint fix

Browse Source
This commit is contained in:
Strider Wilson 2025-06-02 11:43:51 -04:00
parent a4f4ae977e
commit f9e61b2a92
9 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Header.tsx
View File

@ -2,10 +2,10 @@ import React from 'react';
export const Header: React.FC = () => { export const Header: React.FC = () => {
return ( return (
<header className='w-full bg-white border-b border-gray-200 px-4 py-3'> <header className="w-full bg-white border-b border-gray-200 px-4 py-3">
<nav className='max-w-7xl mx-auto flex items-center justify-between'> <nav className="max-w-7xl mx-auto flex items-center justify-between">
<div className='flex items-center'> <div className="flex items-center">
<h1 className='text-xl font-semibold'>Your App Name</h1> <h1 className="text-xl font-semibold">Your App Name</h1>
</div> </div>
{/* Add navigation items here as needed */} {/* Add navigation items here as needed */}
</nav> </nav>

36
app/components/chat/ApproveChange.tsx
View File

@ -58,29 +58,29 @@ const ApproveChange: React.FC<ApproveChangeProps> = ({ rejectFormOpen, setReject
maxHeight: 400, maxHeight: 400,
}} }}
placeholder="What's wrong with the changes?" placeholder="What's wrong with the changes?"
translate='no' translate="no"
/> />
</div> </div>
<div className='flex items-center gap-2 w-full mb-2'> <div className="flex items-center gap-2 w-full mb-2">
<input <input
type='checkbox' type="checkbox"
id='share-project' id="share-project"
checked={shareProject} checked={shareProject}
onChange={(event) => setShareProject(event.target.checked)} onChange={(event) => setShareProject(event.target.checked)}
className="rounded border-red-300 text-red-500 focus:ring-red-500" className="rounded border-red-300 text-red-500 focus:ring-red-500"
/> />
<label htmlFor='share-project' className='text-sm text-red-600'> <label htmlFor="share-project" className="text-sm text-red-600">
Share with Nut team Share with Nut team
</label> </label>
</div> </div>
<div className='flex items-center gap-1 w-full h-[30px] pt-2'> <div className="flex items-center gap-1 w-full h-[30px] pt-2">
<button <button
onClick={() => performReject()} onClick={() => performReject()}
className='flex-1 h-[30px] flex justify-center items-center bg-red-100 border border-red-500 text-red-500 hover:bg-red-200 hover:text-red-600 transition-colors rounded' className="flex-1 h-[30px] flex justify-center items-center bg-red-100 border border-red-500 text-red-500 hover:bg-red-200 hover:text-red-600 transition-colors rounded"
aria-label='Revert changes' aria-label="Revert changes"
title='Revert changes' title="Revert changes"
> >
<div className="i-ph:arrow-arc-left-bold"></div> <div className="i-ph:arrow-arc-left-bold"></div>
</button> </button>
@ -90,22 +90,22 @@ const ApproveChange: React.FC<ApproveChangeProps> = ({ rejectFormOpen, setReject
} }
return ( return (
<div className='flex items-center gap-1 w-full h-[30px] mb-2'> <div className="flex items-center gap-1 w-full h-[30px] mb-2">
<button <button
onClick={() => setRejectFormOpen(true)} onClick={() => setRejectFormOpen(true)}
className='flex-1 h-[30px] flex justify-center items-center bg-red-100 border border-red-500 text-red-500 hover:bg-red-200 hover:text-red-600 transition-colors rounded' className="flex-1 h-[30px] flex justify-center items-center bg-red-100 border border-red-500 text-red-500 hover:bg-red-200 hover:text-red-600 transition-colors rounded"
aria-label='Reject change' aria-label="Reject change"
title='Reject change' title="Reject change"
> >
<div className='i-ph:thumbs-down-bold'></div> <div className="i-ph:thumbs-down-bold"></div>
</button> </button>
<button <button
onClick={onApprove} onClick={onApprove}
className='flex-1 h-[30px] flex justify-center items-center bg-green-100 border border-green-500 text-green-500 hover:bg-green-200 hover:text-green-600 transition-colors rounded' className="flex-1 h-[30px] flex justify-center items-center bg-green-100 border border-green-500 text-green-500 hover:bg-green-200 hover:text-green-600 transition-colors rounded"
aria-label='Approve change' aria-label="Approve change"
title='Approve change' title="Approve change"
> >
<div className='i-ph:thumbs-up-bold'></div> <div className="i-ph:thumbs-up-bold"></div>
</button> </button>
</div> </div>
); );

4
app/components/chat/BaseChat/BaseChat.tsx
View File

@ -167,7 +167,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
return chatStarted ? ( return chatStarted ? (
<Messages <Messages
ref={messageRef} ref={messageRef}
className='flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1 overflow-y-auto' className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1 overflow-y-auto"
messages={messages} messages={messages}
hasPendingMessage={hasPendingMessage} hasPendingMessage={hasPendingMessage}
pendingMessageStatus={pendingMessageStatus} pendingMessageStatus={pendingMessageStatus}
@ -202,7 +202,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
<Arboretum onHide={() => setShowArboretum(false)} /> <Arboretum onHide={() => setShowArboretum(false)} />
) : ( ) : (
<button <button
className='text-bolt-elements-textPrimary text-center mx-auto bg-transparent p-2 rounded-md mt-10' className="text-bolt-elements-textPrimary text-center mx-auto bg-transparent p-2 rounded-md mt-10"
onClick={() => setShowArboretum(true)} onClick={() => setShowArboretum(true)}
> >
Show Arboretum Show Arboretum

30
app/components/chat/BaseChat/components/Arboretum/Arboretum.tsx
View File

@ -10,30 +10,30 @@ export const Arboretum: React.FC<ArboretumProps> = ({ onHide }) => {
const [filterText, setFilterText] = useState(''); const [filterText, setFilterText] = useState('');
return ( return (
<div className='relative flex flex-col items-center'> <div className="relative flex flex-col items-center">
<button <button
onClick={onHide} onClick={onHide}
className='absolute right-4 top-30 p-2 rounded-lg bg-transparent border border-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-2 transition-colors duration-200 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary' className="absolute right-4 top-30 p-2 rounded-lg bg-transparent border border-bolt-elements-textSecondary hover:bg-bolt-elements-background-depth-2 transition-colors duration-200 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
aria-label='Hide Arboretum' aria-label="Hide Arboretum"
> >
<svg <svg
width='20' width="20"
height='20' height="20"
viewBox='0 0 24 24' viewBox="0 0 24 24"
fill='none' fill="none"
stroke='currentColor' stroke="currentColor"
strokeWidth='2' strokeWidth="2"
strokeLinecap='round' strokeLinecap="round"
strokeLinejoin='round' strokeLinejoin="round"
> >
<line x1='18' y1='6' x2='6' y2='18' /> <line x1="18" y1="6" x2="6" y2="18" />
<line x1='6' y1='6' x2='18' y2='18' /> <line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
</button> </button>
<div className='text-2xl lg:text-4xl font-bold text-bolt-elements-textPrimary mt-8 mb-4 animate-fade-in text-center max-w-chat mx-auto'> <div className="text-2xl lg:text-4xl font-bold text-bolt-elements-textPrimary mt-8 mb-4 animate-fade-in text-center max-w-chat mx-auto">
Arboretum Arboretum
</div> </div>
<div className='text-bolt-elements-textSecondary text-center max-w-chat mx-auto'> <div className="text-bolt-elements-textSecondary text-center max-w-chat mx-auto">
Browse these auto-generated apps for a place to start Browse these auto-generated apps for a place to start
</div> </div>
<SearchInput onSearch={setFilterText} /> <SearchInput onSearch={setFilterText} />

36
app/components/chat/BaseChat/components/ChatPromptContainer/ChatPromptContainer.tsx
View File

@ -46,28 +46,28 @@ export const ChatPromptContainer: React.FC<ChatPromptContainerProps> = ({
<svg className={classNames(styles.PromptEffectContainer)}> <svg className={classNames(styles.PromptEffectContainer)}>
<defs> <defs>
<linearGradient <linearGradient
id='line-gradient' id="line-gradient"
x1='20%' x1="20%"
y1='0%' y1="0%"
x2='-14%' x2="-14%"
y2='10%' y2="10%"
gradientUnits='userSpaceOnUse' gradientUnits="userSpaceOnUse"
gradientTransform='rotate(-45)' gradientTransform="rotate(-45)"
> >
<stop offset='0%' stopColor='#b44aff' stopOpacity='0%'></stop> <stop offset="0%" stopColor="#b44aff" stopOpacity="0%"></stop>
<stop offset='40%' stopColor='#b44aff' stopOpacity='80%'></stop> <stop offset="40%" stopColor="#b44aff" stopOpacity="80%"></stop>
<stop offset='50%' stopColor='#b44aff' stopOpacity='80%'></stop> <stop offset="50%" stopColor="#b44aff" stopOpacity="80%"></stop>
<stop offset='100%' stopColor='#b44aff' stopOpacity='0%'></stop> <stop offset="100%" stopColor="#b44aff" stopOpacity="0%"></stop>
</linearGradient> </linearGradient>
<linearGradient id='shine-gradient'> <linearGradient id="shine-gradient">
<stop offset='0%' stopColor='white' stopOpacity='0%'></stop> <stop offset="0%" stopColor="white" stopOpacity="0%"></stop>
<stop offset='40%' stopColor='#ffffff' stopOpacity='80%'></stop> <stop offset="40%" stopColor="#ffffff" stopOpacity="80%"></stop>
<stop offset='50%' stopColor='#ffffff' stopOpacity='80%'></stop> <stop offset="50%" stopColor="#ffffff" stopOpacity="80%"></stop>
<stop offset='100%' stopColor='white' stopOpacity='0%'></stop> <stop offset="100%" stopColor="white" stopOpacity="0%"></stop>
</linearGradient> </linearGradient>
</defs> </defs>
<rect className={classNames(styles.PromptEffectLine)} pathLength='100' strokeLinecap='round'></rect> <rect className={classNames(styles.PromptEffectLine)} pathLength="100" strokeLinecap="round"></rect>
<rect className={classNames(styles.PromptShine)} x='48' y='24' width='70' height='1'></rect> <rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
</svg> </svg>
<FilePreview <FilePreview
files={uploadedFiles} files={uploadedFiles}

6
app/components/chat/BaseChat/components/IntroSection/IntroSection.tsx
View File

@ -2,11 +2,11 @@ import React from 'react';
export const IntroSection: React.FC = () => { export const IntroSection: React.FC = () => {
return ( return (
<div id='intro' className='mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0'> <div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
<h1 className='text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in'> <h1 className="text-3xl lg:text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
Get what you want Get what you want
</h1> </h1>
<p className='text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200'> <p className="text-md lg:text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
Write, test, and fix your app all from one prompt Write, test, and fix your app all from one prompt
</p> </p>
</div> </div>

10
app/components/chat/ChatComponent/Chat.client.tsx
View File

@ -34,24 +34,24 @@ export function Chat() {
<ToastContainer <ToastContainer
closeButton={({ closeToast }) => { closeButton={({ closeToast }) => {
return ( return (
<button className='Toastify__close-button' onClick={closeToast}> <button className="Toastify__close-button" onClick={closeToast}>
<div className='i-ph:x text-lg' /> <div className="i-ph:x text-lg" />
</button> </button>
); );
}} }}
icon={({ type }) => { icon={({ type }) => {
switch (type) { switch (type) {
case 'success': { case 'success': {
return <div className='i-ph:check-bold text-bolt-elements-icon-success text-2xl' />; return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
} }
case 'error': { case 'error': {
return <div className='i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl' />; return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
} }
} }
return undefined; return undefined;
}} }}
position='bottom-right' position="bottom-right"
pauseOnFocusLoss pauseOnFocusLoss
transition={toastAnimation} transition={toastAnimation}
/> />

14
app/components/chat/MessageInput/MessageInput.tsx
View File

@ -181,10 +181,10 @@ export const MessageInput: React.FC<MessageInputProps> = ({
/> />
)} )}
</ClientOnly> </ClientOnly>
<div className='flex justify-between items-center text-sm p-4 pt-2'> <div className="flex justify-between items-center text-sm p-4 pt-2">
<div className='flex gap-1 items-center'> <div className="flex gap-1 items-center">
<IconButton title='Upload file' className='transition-all' onClick={handleFileUpload}> <IconButton title="Upload file" className="transition-all" onClick={handleFileUpload}>
<div className='i-ph:paperclip text-xl'></div> <div className="i-ph:paperclip text-xl"></div>
</IconButton> </IconButton>
<SpeechRecognitionButton <SpeechRecognitionButton
@ -195,9 +195,9 @@ export const MessageInput: React.FC<MessageInputProps> = ({
/> />
</div> </div>
{input.length > 3 ? ( {input.length > 3 ? (
<div className='text-xs text-bolt-elements-textTertiary'> <div className="text-xs text-bolt-elements-textTertiary">
Use <kbd className='kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2'>Shift</kbd> +{' '} Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
<kbd className='kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2'>Return</kbd> a new line <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> a new line
</div> </div>
) : null} ) : null}
</div> </div>

6
app/components/chat/SearchInput/SearchInput.tsx
View File

@ -7,12 +7,12 @@ interface SearchInputProps {
export const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => { export const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
return ( return (
<div <div
className='placeholder-bolt-elements-textTertiary' className="placeholder-bolt-elements-textTertiary"
style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }} style={{ display: 'flex', justifyContent: 'center', marginBottom: '1rem' }}
> >
<input <input
type='text' type="text"
placeholder='Search' placeholder="Search"
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
onSearch(event.currentTarget.value); onSearch(event.currentTarget.value);