diff --git a/package.json b/package.json index 03f8bd7..75f5996 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@dashx/react": "^0.0.6", + "@dashx/react": "^0.1.1", "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", "axios": "^1.7.2", @@ -54,6 +54,7 @@ "@tailwindcss/forms": "^0.5.2", "eslint": "^9.2.0", "eslint-config-react-app": "^7.0.1", + "prettier": "^3.2.5", "tailwindcss": "^3.1.3" } } diff --git a/public/index.html b/public/index.html index 3c82201..2f1c76f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,21 @@ - - - - - - - - - - - DashX Demo React - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index fdfd82e..e3fa8e0 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,7 @@ import Settings from './pages/Settings' import DashboardLayout from './components/layouts/DashboardLayout' import RequireUser from './components/authentication/RequireUser' import RequireVisitor from './components/authentication/RequireVisitor' +import Logout from './pages/Logout' const App = () => { return ( @@ -31,6 +32,9 @@ const App = () => { } /> + }> + } /> + }> } /> diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx index a722c92..bb6f591 100644 --- a/src/components/Avatar.jsx +++ b/src/components/Avatar.jsx @@ -10,7 +10,7 @@ const Avatar = ({ user }) => { return (
- Avatar + Avatar
) } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 5769662..ea37ad5 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,24 +1,34 @@ -import classNames from 'classnames' -import React, { Fragment, useEffect } from 'react' +import React, { useEffect } from 'react' import { Bars3Icon } from '@heroicons/react/24/outline' -import { Link, NavLink, useNavigate } from 'react-router-dom' +import { Link, NavLink, useMatch } from 'react-router-dom' import { MagnifyingGlassIcon } from '@heroicons/react/24/solid' -import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' -import { NotificationBell } from '@dashx/react' +import { NotificationBell } from '@dashx/react/widgets' import Avatar from './Avatar' import { useCurrentUserContext } from '../contexts/CurrentUserContext' import api from '../lib/api' +import { Button, Card, Flex, Popover } from '@dashx/react' const userNavigation = [ { name: 'Profile', href: '/update-profile' }, { name: 'Settings', href: '/settings' } ] +const NavItem = ({ name, href }) => { + const match = useMatch(href) + + return ( + + ) +} + const Navbar = ({ setSidebarOpen }) => { - const navigate = useNavigate() - const { logout, user, setUser } = useCurrentUserContext() + const { user, setUser } = useCurrentUserContext() useEffect(() => { const getProfile = async () => { @@ -31,7 +41,7 @@ const Navbar = ({ setSidebarOpen }) => { return (
-
+
-
- +
+ - -
- - Open user menu - - -
- - - {userNavigation.map((item) => ( - - {() => ( - - classNames( - 'text-gray-300', // Default text color - { - '!bg-gray-900 !text-white': isActive, - 'hover:bg-gray-100': !isActive - } - ) - } - > - {item.name} - - )} - - ))} - - - - + + + + + + {userNavigation.map((item) => ( + + ))} + + + + + +
diff --git a/src/components/Post.jsx b/src/components/Post.jsx index e56ed5b..b3213a6 100644 --- a/src/components/Post.jsx +++ b/src/components/Post.jsx @@ -2,6 +2,7 @@ import React from 'react' import { BookmarkIcon } from '@heroicons/react/24/outline' import dayjs from '../lib/dayjs' +import { Card } from '@dashx/react' const Post = ({ post, toggleBookmark }) => { const { created_at, bookmarked_at, text, user } = post @@ -9,7 +10,7 @@ const Post = ({ post, toggleBookmark }) => { const published = dayjs(created_at).fromNow() return ( -
+ { {bookmarked_at ? ( ) : ( - - )} + + )}

Posted {published}

@@ -33,7 +34,7 @@ const Post = ({ post, toggleBookmark }) => {

{text}

- + ) } diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 5af09d3..65914ab 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -3,13 +3,7 @@ import { Link, NavLink, useNavigate } from 'react-router-dom' import classNames from 'classnames' import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react' -import { - BellIcon, - BookmarkIcon, - CogIcon, - HomeIcon, - XMarkIcon, -} from '@heroicons/react/24/outline' +import { BellIcon, BookmarkIcon, CogIcon, HomeIcon, XMarkIcon } from '@heroicons/react/24/outline' import DashXLogoWhite from '../assets/dashx_logo_white.png' diff --git a/src/components/ToggleSwitch.jsx b/src/components/ToggleSwitch.jsx index 8ba1840..2c9c7c0 100644 --- a/src/components/ToggleSwitch.jsx +++ b/src/components/ToggleSwitch.jsx @@ -19,13 +19,13 @@ const ToggleSwitch = (props) => { 'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-50 focus:outline-none' )} > -