-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
### What problem does this PR solve? feat: Add Datasets component to home page #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
- Loading branch information
Showing
12 changed files
with
436 additions
and
129 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; | ||
| import { cva } from 'class-variance-authority'; | ||
| import { ChevronDown } from 'lucide-react'; | ||
| import * as React from 'react'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| const NavigationMenuViewport = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div className={cn('absolute left-0 top-full flex justify-center')}> | ||
| <NavigationMenuPrimitive.Viewport | ||
| className={cn( | ||
| 'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', | ||
| className, | ||
| )} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| )); | ||
| NavigationMenuViewport.displayName = | ||
| NavigationMenuPrimitive.Viewport.displayName; | ||
|
|
||
| const NavigationMenu = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| 'relative z-10 flex max-w-max flex-1 items-center justify-center', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <NavigationMenuViewport /> | ||
| </NavigationMenuPrimitive.Root> | ||
| )); | ||
| NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName; | ||
|
|
||
| const NavigationMenuList = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.List>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.List | ||
| ref={ref} | ||
| className={cn( | ||
| 'group flex flex-1 list-none items-center justify-center space-x-1', | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; | ||
|
|
||
| const NavigationMenuItem = NavigationMenuPrimitive.Item; | ||
|
|
||
| const navigationMenuTriggerStyle = cva( | ||
| 'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50', | ||
| ); | ||
|
|
||
| const NavigationMenuTrigger = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn(navigationMenuTriggerStyle(), 'group', className)} | ||
| {...props} | ||
| > | ||
| {children}{' '} | ||
| <ChevronDown | ||
| className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" | ||
| aria-hidden="true" | ||
| /> | ||
| </NavigationMenuPrimitive.Trigger> | ||
| )); | ||
| NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName; | ||
|
|
||
| const NavigationMenuContent = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ', | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName; | ||
|
|
||
| const NavigationMenuLink = NavigationMenuPrimitive.Link; | ||
|
|
||
| const NavigationMenuIndicator = React.forwardRef< | ||
| React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, | ||
| React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <NavigationMenuPrimitive.Indicator | ||
| ref={ref} | ||
| className={cn( | ||
| 'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" /> | ||
| </NavigationMenuPrimitive.Indicator> | ||
| )); | ||
| NavigationMenuIndicator.displayName = | ||
| NavigationMenuPrimitive.Indicator.displayName; | ||
|
|
||
| export { | ||
| NavigationMenu, | ||
| NavigationMenuContent, | ||
| NavigationMenuIndicator, | ||
| NavigationMenuItem, | ||
| NavigationMenuLink, | ||
| NavigationMenuList, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuViewport, | ||
| navigationMenuTriggerStyle, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { Button } from '@/components/ui/button'; | ||
| import { Card, CardContent } from '@/components/ui/card'; | ||
| import { ChevronRight, Cpu, MessageSquare, Search } from 'lucide-react'; | ||
|
|
||
| const applications = [ | ||
| { | ||
| id: 1, | ||
| title: 'Jarvis chatbot', | ||
| type: 'Chat app', | ||
| date: '11/24/2024', | ||
| icon: <MessageSquare className="h-6 w-6" />, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: 'Search app 01', | ||
| type: 'Search app', | ||
| date: '11/24/2024', | ||
| icon: <Search className="h-6 w-6" />, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'Chatbot 01', | ||
| type: 'Chat app', | ||
| date: '11/24/2024', | ||
| icon: <MessageSquare className="h-6 w-6" />, | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: 'Workflow 01', | ||
| type: 'Agent', | ||
| date: '11/24/2024', | ||
| icon: <Cpu className="h-6 w-6" />, | ||
| }, | ||
| ]; | ||
|
|
||
| export function Applications() { | ||
| return ( | ||
| <section className="mt-12"> | ||
| <div className="flex justify-between items-center mb-6"> | ||
| <h2 className="text-2xl font-bold">Applications</h2> | ||
| <div className="flex bg-colors-background-inverse-standard rounded-lg p-1"> | ||
| <Button variant="default" size="sm"> | ||
| All | ||
| </Button> | ||
| <Button variant="ghost" size="sm"> | ||
| Chat | ||
| </Button> | ||
| <Button variant="ghost" size="sm"> | ||
| Search | ||
| </Button> | ||
| <Button variant="ghost" size="sm"> | ||
| Agents | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| <div className="grid grid-cols-4 gap-6"> | ||
| {[...Array(12)].map((_, i) => { | ||
| const app = applications[i % 4]; | ||
| return ( | ||
| <Card key={i} className="bg-colors-background-inverse-weak"> | ||
| <CardContent className="p-4 flex items-center gap-6"> | ||
| <div className="w-[70px] h-[70px] rounded-xl flex items-center justify-center bg-gradient-to-br from-[#45A7FA] via-[#AE63E3] to-[#4433FF]"> | ||
| {app.icon} | ||
| </div> | ||
| <div className="flex-1"> | ||
| <h3 className="text-lg font-semibold">{app.title}</h3> | ||
| <p className="text-sm opacity-80">{app.type}</p> | ||
| <p className="text-sm opacity-80">{app.date}</p> | ||
| </div> | ||
| <Button variant="secondary" size="icon"> | ||
| <ChevronRight className="h-6 w-6" /> | ||
| </Button> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| })} | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.