Skip to content

Commit

Permalink
Fix quick start formatting (meltylabs#45)
Browse files Browse the repository at this point in the history 
* [by melty] refactor: Replace inline styles with Tailwind CSS classes in OnboardingSection component

* onboarding fixups

* start
  • Loading branch information
@cbh123
cbh123 authored Sep 4, 2024
1 parent 384d183 commit fd91afa
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 44 deletions.
29 changes: 15 additions & 14 deletions extensions/spectacular/webview-ui/src/components/OnboardingSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { Code, FileCode, MessageCircleQuestion } from "lucide-react";
import { Button } from "./ui/button";

interface OnboardingSectionProps {
setMessageText: (text: string) => void;
Expand All @@ -9,34 +8,36 @@ interface OnboardingSectionProps {
const OnboardingSection: React.FC<OnboardingSectionProps> = ({ setMessageText }) => {
return (
<div className="my-8">
<ul className="grid grid-cols-1 md:grid-cols-3 gap-8 list-none p-0">

<h2 className="text-muted-foreground my-3 font-semibold">Try asking Melty to...</h2>
<ul className="grid grid-cols-1 md:grid-cols-3 gap-8 list-none p-0 mt-4">
<li className="flex flex-col">
<h2 className="text-muted-foreground font-semibold mb-2 flex items-center">
<Code className="h-3 w-3 text-muted-foreground mr-1" />
<h2 className="text-gray-500 font-semibold mb-2 flex items-center">
<Code className="h-3 w-3 text-gray-500 mr-1" />
Code
</h2>
<div className="space-y-2">
<Button onClick={() => setMessageText("Make me a flask app that shows air quality in NYC.")} variant="outline" className="w-full justify-start">&ldquo;Make me a flask app that shows air quality in NYC.&rdquo;</Button>
<Button onClick={() => setMessageText("Make a rust script that lets me play tic tac toe.")} variant="outline" className="w-full justify-start">&ldquo;Make a rust script that lets me play tic tac toe.&rdquo;</Button>
<Button onClick={() => setMessageText("Can you refactor my main function? It's getting a bit long.")} variant="outline" className="w-full justify-start">&ldquo;Can you refactor __? It's getting a bit long.&rdquo;</Button>
<button onClick={() => setMessageText("Make me a flask app that shows air quality in NYC.")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;Make me a flask app that shows air quality in NYC.&rdquo;</button>
<button onClick={() => setMessageText("Make a rust script that lets me play tic tac toe.")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;Make a rust script that lets me play tic tac toe.&rdquo;</button>
<button onClick={() => setMessageText("Can you refactor my main function? It's getting a bit long.")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;Can you refactor __? It's getting a bit long.&rdquo;</button>
</div>
</li>
<li className="flex flex-col">
<h2 className="text-muted-foreground font-semibold mb-2 flex items-center">
<FileCode className="h-3 w-3 text-muted-foreground mr-1" />
<h2 className="text-gray-500 font-semibold mb-2 flex items-center">
<FileCode className="h-3 w-3 text-gray-500 mr-1" />
Explain
</h2>
<Button onClick={() => setMessageText("Tell me about my codebase")} variant="outline" className="w-full justify-start">&ldquo;Tell me about my codebase&rdquo;</Button>
<button onClick={() => setMessageText("Tell me about my codebase")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;Tell me about my codebase&rdquo;</button>
<p className="text-gray-500 text-xs mt-4">Melty can understand TypeScript and JS codebases. You can also give it specific files to focus on with the `@` command.</p>
</li>
<li className="flex flex-col">
<h2 className="text-muted-foreground font-semibold mb-2 flex items-center">
<MessageCircleQuestion className="h-3 w-3 text-muted-foreground mr-1" />
<h2 className="text-gray-500 font-semibold mb-2 flex items-center">
<MessageCircleQuestion className="h-3 w-3 text-gray-500 mr-1" />
Ask
</h2>
<div className="space-y-2">
<Button onClick={() => setMessageText("What's the bash command for listing files and their sizes?")} variant="outline" className="w-full justify-start">&ldquo;bash command for listing files and their sizes&rdquo;</Button>
<Button onClick={() => setMessageText("What's the ffmpeg command for converting mp4 to gif?")} variant="outline" className="w-full justify-start">&ldquo;ffmpeg command for mp4 to gif&rdquo;</Button>
<button onClick={() => setMessageText("What's the bash command for listing files and their sizes?")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;bash command for listing files and their sizes&rdquo;</button>
<button onClick={() => setMessageText("What's the ffmpeg command for converting mp4 to gif?")} className="w-full text-left px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors">&ldquo;ffmpeg command for mp4 to gif&rdquo;</button>
</div>
</li>
</ul>
Expand Down
64 changes: 34 additions & 30 deletions extensions/spectacular/webview-ui/src/components/Tasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,37 +486,41 @@ export function Tasks({
</div>
)}

<h2 className="text-muted-foreground font-semibold mt-6 mb-2 flex items-center">
<MessageCircle className="h-3 w-3 text-muted-foreground mr-1" />
Chats
</h2>
<div className="grid md:grid-cols-3 grid-cols-1 gap-6 mt-4">
{tasks.length === 0 && <p>No tasks</p>}
{tasks.map((task) => (
<div key={task.id} className="relative">
<button className="text-left w-full" onClick={() => { activateAndNavigateToTask(task.id) }}>
<Card>
<CardHeader>
<CardTitle>{task.name}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-xs text-gray-500 mt-2">
{formatDate(new Date(task.updatedAt))}
</p>
</CardContent>
</Card>
</button>
<Button
variant="ghost"
size="sm"
className="absolute top-2 right-2 p-1"
onClick={(e) => deleteTask(task.id, e)}
>
<X className="text-muted-foreground h-4 w-4" />
</Button>
{tasks.length > 0 &&
<>
<h2 className="text-muted-foreground font-semibold mt-6 mb-2 flex items-center">
<MessageCircle className="h-3 w-3 text-muted-foreground mr-1" />
Chats
</h2>
<div className="grid md:grid-cols-3 grid-cols-1 gap-6 mt-4">
{tasks.length === 0 && <p>No tasks</p>}
{tasks.map((task) => (
<div key={task.id} className="relative">
<button className="text-left w-full" onClick={() => { activateAndNavigateToTask(task.id) }}>
<Card>
<CardHeader>
<CardTitle>{task.name}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-xs text-gray-500 mt-2">
{formatDate(new Date(task.updatedAt))}
</p>
</CardContent>
</Card>
</button>
<Button
variant="ghost"
size="sm"
className="absolute top-2 right-2 p-1"
onClick={(e) => deleteTask(task.id, e)}
>
<X className="text-muted-foreground h-4 w-4" />
</Button>
</div>
))}
</div>
))}
</div>
</>
}
<div className="mt-4 flex items-center">
{gitConfigError === null ? (
<>
Expand Down

0 comments on commit fd91afa

Please sign in to comment.