Steven/system-prompts-and-models-of-ai-tools
1
0
Fork 0
mirror of https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git synced 2025-09-13 19:37:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add useful context

Browse Source
This commit is contained in:
Muhammed Kılıç 2025-04-21 14:06:47 +03:00 committed by GitHub
parent 7a137be09e
commit d82373c8a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
Lovable/Lovable Prompt.txt
View File

@ -1358,3 +1358,186 @@ Add appropriate comments for complex logic
Follow project's naming conventions Follow project's naming conventions
<useful-context>
Here is some useful context that was retrieved from our knowledge base and that you may find useful:
<light-mode>
and
</light-mode>
<shadcn-sidebar>
Here follows the documentation for the Shadcn Sidebar component, which you can use to add a sidebar to your Lovable project.
If you use a sidebar, make sure that there's a way to collapse it or bring it back.
# Usage
app/layout.tsx
```typescript
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider>
<AppSidebar />
<main>
<SidebarTrigger />
{children}
</main>
</SidebarProvider>
)
}
```
components/app-sidebar.tsx
```typescript
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarHeader,
} from "@/components/ui/sidebar"
export function AppSidebar() {
return (
<Sidebar>
<SidebarHeader />
<SidebarContent>
<SidebarGroup />
<SidebarGroup />
</SidebarContent>
<SidebarFooter />
</Sidebar>
)
}
```
Let's start with the most basic sidebar. A collapsible sidebar with a menu.
### Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
app/layout.tsx
```typescript
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider>
<AppSidebar />
<main>
<SidebarTrigger />
{children}
</main>
</SidebarProvider>
)
}
```
IMPORTANT: Make sure that the div that `SidebarProvider` wraps uses `w-full` to avoid layout issues, it won't stretch otherwise.
```typescript
<SidebarProvider>
<div className="min-h-screen flex w-full">
...
</div>
</SidebarProvider>
```
### Create a new sidebar component at `components/app-sidebar.tsx`.
components/app-sidebar.tsx
```typescript
import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
export function AppSidebar() {
return (
<Sidebar>
<SidebarContent />
</Sidebar>
)
}
```
### Now, let's add a `SidebarMenu` to the sidebar.
We'll use the `SidebarMenu` component in a `SidebarGroup`.
components/app-sidebar.tsx
```typescript
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
// Menu items.
const items = [
{
title: "Home",
url: "#",
icon: Home,
},
{
title: "Inbox",
url: "#",
icon: Inbox,
},
{
title: "Calendar",
url: "#",
icon: Calendar,
},
{
title: "Search",
url: "#",
icon: Search,
},
{
title: "Settings",
url: "#",
icon: Settings,
},
]
export function AppSidebar() {
return (
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
)
}
```
</shadcn-sidebar>
</useful-context>