-
-
-
- Get started by editing
- src/app/page.tsx
-
-
- By{' '}
-
-
-
-
-
-
+ return (
+ - Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- +export default function Home() { - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- + let tabs = [ + { + id: 'photos', + label: 'Photos', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' + }, + { + id: 'music', + label: 'Music', + content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' + }, + { + id: 'videos', + label: 'Videos', + content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' + } + ]; - -- Templates{' '} - - -> - -
-- Explore starter templates for Next.js. -
- + const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, + ]; + + const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, + ]; + const items = [ + { + id: 1, + href: '/', + label: 'Home' + }, + { + id: 2, + href: '/music', + label: 'Music' + }, + { + id: 3, + href: '/artist', + label: 'Artist' + }, + { + id: 4, + href: '/album', + label: 'Album' + }, + { + id: 5, + href: '/song', + label: 'Song' + }, + { + id: 6, + href: '/genre', + label: 'Genre' + }, + { + id: 7, + href: '/playlist', + label: 'Playlist' + }, + { + id: 8, + href: '/search', + label: 'Search' + }, + ] - -- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
new file mode 100644
index 0000000..658b983
--- /dev/null
+++ b/src/components/Avatar/Avatar.tsx
@@ -0,0 +1,39 @@
+import { Avatar as AvatarContainer, AvatarGroup } from "@nextui-org/avatar";
+import { ReactElement } from "react";
+
+interface AvatarProps {
+ isAvatarGroup?: boolean;
+ avatarGroup?: {};
+ children?: ReactElement;
+}
+
+const Avatar: React.FC
+
+ );
+}
+export function BgGradient() {
+ return (
+
+
+ );
+}
+export function BgWarning() {
+ return (
+
+
+ );
+}
+export function BgAmber() {
+ return (
+
+
+ );
+}
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..1194271
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import {
+ Breadcrumbs as BreadcrumbsContainer,
+ BreadcrumbItem
+} from '@nextui-org/breadcrumbs';
+import { useState } from 'react';
+
+export const Breadcrumbs = ({
+ breadcrumbs,
+ size,
+ color,
+ variant,
+ radius,
+ separator,
+ spaceBetween='px-1',
+ maxItems,
+ itemsBeforeCollapse,
+ itemsAfterCollapse,
+ isDisabled
+}: {
+ breadcrumbs: { id: string | number, href: string, label: string }[];
+ size?: 'sm' | 'md' | 'lg' | undefined;
+ color?: 'foreground' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | undefined;
+ variant?: 'solid' | 'bordered' | 'light' | undefined;
+ radius?: 'none' | 'full' | 'lg' | 'md' | 'sm' | undefined;
+ separator?: string;
+ isDisabled?: boolean;
+ spaceBetween?: string;
+ maxItems?: number;
+ itemsBeforeCollapse?: number;
+ itemsAfterCollapse?: number;
+}) => {
+ const [currentPage, setCurrentPage] = useState
+ //
+ //
+ //
+ //
+ //
+ // {items.map((item, index) => (
+ //
+ // {item.children}
+ //
+ // ))}
+ //
+ //
+ // {separator}
+ //
+ // )}
+ >
+ {breadcrumbs.map(crumb=> (
+
+
+
+
+
+
+ );
+}
+
diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx
new file mode 100644
index 0000000..343ff85
--- /dev/null
+++ b/src/components/MenuBar/MenuBar.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import React from "react";
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@nextui-org/navbar";
+import { Button } from "@nextui-org/button";
+import {Dropdown1} from "@/components/Dropdown/Dropdown1";
+
+const itemsNavbar = [
+ {
+ label: 'Inicio',
+ href: '/'
+ },
+ {
+ label: 'Dropdown1',
+ href: '/arbol',
+ children: [
+ {
+ key: "label1",
+ label: "item1",
+ href: "#"
+ },
+ {
+ key: "label2",
+ label: "item2",
+ href: "#"
+ },
+ {
+ key: "label3",
+ label: "item3",
+ href: "#"
+ },
+ {
+ key: "label4",
+ label: "item4",
+ href: "#"
+ },
+ {
+ key: "label5",
+ label: "item5",
+ href: "#"
+ }
+
+ ]
+ }
+]
+
+export const MenuBar = () => {
+
+ const commonStyle = {
+ fontSize: '18px',
+ fontFamily: 'Arial, sans-serif',
+ color: 'white'
+
+ };
+
+ const linkStyle = {...commonStyle,
+ padding: '8px 12px',
+ borderRadius: '10px',
+ };
+
+ return (
+
+ 
+
+
+
+
+
+
+ 316-4726059 • 311 846 1857 • 315 617 7252
+bosquesdecolombia.gerencia@hotmail.com
+
+
+ Bosques De Colombia
*/} +
+
+ {tab => (
+
+
+
+ {tab.content}
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
new file mode 100644
index 0000000..1ad6271
--- /dev/null
+++ b/src/components/Search/Search.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { Input } from '@nextui-org/input';
+import { SearchIcon } from './SearchIcon'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { useDebouncedCallback } from 'use-debounce';
+
+export const Search = ({
+ label='Search',
+ placeholder='Types of search',
+ width='340px',
+ radius='lg',
+ bg='bg-default-200/50',
+ darkBg='bg-default/60',
+ hover='bg-default-200/70',
+ darkHover='bg-default/70',
+ style,
+}: {
+ label?: string
+ placeholder?: string;
+ width?: string;
+ radius?: 'none' | 'sm' | 'md' | 'lg' | 'full' | undefined;
+ bg?: string;
+ style?: { label: string; input: string[]; innerWrapper: string; inputWrapper: string[]; };
+ darkBg?: string;
+ hover?: string;
+ darkHover?: string;
+}) => {
+ const searchParams = useSearchParams()
+ const pathName = usePathname()
+ const { replace } = useRouter()
+ const [searchValue, setSearchValue] = useState(searchParams.get('search') || '');
+ const WAIT_BETWEEN_CHANGE = 200
+
+ const handleSearchParams = useDebouncedCallback((value: string) => {
+ const params = new URLSearchParams(searchParams)
+ if (value) {
+ params.set('search', value)
+ } else {
+ params.delete('search')
+ }
+ replace(`${pathName}?${params.toString()}`)
+ }, WAIT_BETWEEN_CHANGE)
+
+ const handleChange = (value: string) => {
+ setSearchValue(value)
+ handleSearchParams(value)
+ }
+
+ const handleClear = () => {
+ const params = new URLSearchParams(searchParams)
+ params.delete('search')
+ replace(`${pathName}?${params.toString()}`)
+ setSearchValue('')
+ }
+
+ const stylesDefault = {
+ label: style?.label || 'text-black/50 dark:text-white/90',
+ input: [
+ 'bg-white',
+ 'text-black/90 dark:text-white/90',
+ 'placeholder:text-default-700/50 dark:placeholder:text-white/60',
+ ...style?.input || [],
+ ],
+ innerWrapper: style?.innerWrapper || 'bg-transparent',
+ inputWrapper: [
+ 'shadow-xl',
+ bg,
+ `dark:${darkBg}`,
+ 'backdrop-blur-xl',
+ 'backdrop-saturate-200',
+ `hover:${hover}`,
+ `dark:hover:${darkHover}`,
+ 'group-data-[focused=true]:bg-default-200/50',
+ 'dark:group-data-[focused=true]:bg-default/60',
+ '!cursor-text',
+ ...style?.inputWrapper || [],
+ ],
+ }
+
+ return (
+