update
This commit is contained in:
parent
02113c08ac
commit
cb03e59ebb
@ -2,8 +2,9 @@
|
||||
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react'
|
||||
import { ChevronDown, ChevronRight, Menu } from 'lucide-react'
|
||||
import { useEffect, useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
type NavItem = {
|
||||
name: string
|
||||
@ -20,18 +21,19 @@ type CategoryData = {
|
||||
[key: string]: SubCategory[]
|
||||
}
|
||||
|
||||
export function Navigation() {
|
||||
export default function Component() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [activeCategory, setActiveCategory] = useState("all")
|
||||
const [activeSubCategory, setActiveSubCategory] = useState("all")
|
||||
const [data, setData] = useState<CategoryData>({})
|
||||
const [filteredItems, setFilteredItems] = useState<NavItem[]>([])
|
||||
const [expandedCategories, setExpandedCategories] = useState<string[]>([])
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
try {
|
||||
const response = await fetch('/api/load-yaml-data');
|
||||
const response = await fetch('https://aps.icu/api/load-yaml-data');
|
||||
const yamlData = await response.json();
|
||||
setData(yamlData);
|
||||
} catch (error) {
|
||||
@ -73,12 +75,20 @@ export function Navigation() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<div className="flex flex-col lg:flex-row h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<Button
|
||||
className="lg:hidden fixed top-4 left-4 z-20"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
{/* Left Sidebar Navigation */}
|
||||
<aside className="w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto">
|
||||
<aside className={`w-full lg:w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto h-64 lg:h-full ${isSidebarOpen ? 'block' : 'hidden'} lg:block fixed lg:static top-0 left-0 right-0 z-10`}>
|
||||
<ScrollArea className="h-full">
|
||||
<nav className="p-4">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-200">APS NAV</h2>
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-200">分类</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveCategory("all")
|
||||
@ -124,11 +134,11 @@ export function Navigation() {
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 overflow-y-auto p-8">
|
||||
<main className="flex-1 overflow-y-auto p-4 lg:p-8">
|
||||
{/* Search Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 lg:mb-8">
|
||||
<Input
|
||||
className="w-full max-w-md mx-auto"
|
||||
className="w-full max-w-full lg:max-w-md mx-auto"
|
||||
placeholder="搜索项目..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
@ -136,7 +146,7 @@ export function Navigation() {
|
||||
</div>
|
||||
|
||||
{/* Items Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
|
||||
{filteredItems.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
@ -145,7 +155,7 @@ export function Navigation() {
|
||||
rel="noopener noreferrer"
|
||||
className="block overflow-hidden rounded-lg border bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-md transition-all hover:shadow-lg p-6"
|
||||
>
|
||||
<h3 className="text-lg font-semibold mb-2">{item.name}</h3>
|
||||
<h3 className="text-base lg:text-lg font-semibold mb-2">{item.name}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
|
||||
</a>
|
||||
))}
|
||||
|
||||
57
components/ui/button.tsx
Normal file
57
components/ui/button.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
1
package-lock.json
generated
1
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-scroll-area": "^1.2.1",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user