Add Nav component
This commit is contained in:
parent
04e6b01c2a
commit
da5783c08f
SSH Key Fingerprint:
SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
|
|
@ -10,7 +10,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwindcss": "^3.2.4"
|
||||
|
|
@ -19,6 +22,7 @@
|
|||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"eslint": "^8.32.0",
|
||||
"vite": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,20 @@
|
|||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
import { useState } from "react";
|
||||
import "./App.css";
|
||||
import Nav from "./components/Nav";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dark:bg-gray-800 min-h-screen">
|
||||
<nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
|
||||
<div className="container flex flex-wrap items-center justify-between mx-auto">
|
||||
<a href="{% url 'index' %}" className="flex items-center">
|
||||
<span className="text-4xl">⌚</span>
|
||||
<span className="self-center text-xl font-semibold whitespace-nowrap text-white">Timetracker</span>
|
||||
</a>
|
||||
<div className="w-full md:block md:w-auto">
|
||||
<ul
|
||||
className="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
|
||||
<li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New Game</a></li>
|
||||
<li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_platform' %}">New Platform</a></li>
|
||||
{/* {% if game_available and platform_available %} */}
|
||||
<li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_purchase' %}">New Purchase</a></li>
|
||||
{/* {% endif %} */}
|
||||
{/* {% if purchase_available %} */}
|
||||
<li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_session' %}">New Session</a></li>
|
||||
{/* {% endif %} */}
|
||||
{/* {% if session_count > 0 %} */}
|
||||
<li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'list_sessions' %}">All Sessions</a></li>
|
||||
{/* {% endif %} */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* {% block content %}No content here.{% endblock content %} */}
|
||||
</div>
|
||||
{/* {% load version %} */}
|
||||
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
||||
</>
|
||||
)
|
||||
<div className="dark:bg-gray-800 min-h-screen">
|
||||
<Nav />
|
||||
{/* {% block content %}No content here.{% endblock content %} */}
|
||||
</div>
|
||||
{/* {% load version %} */}
|
||||
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
function Nav() {
|
||||
return (
|
||||
<nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
|
||||
<div className="container flex flex-wrap items-center justify-between mx-auto">
|
||||
<a href="{% url 'index' %}" className="flex items-center">
|
||||
<span className="text-4xl">⌚</span>
|
||||
<span className="self-center text-xl font-semibold whitespace-nowrap text-white">
|
||||
Timetracker
|
||||
</span>
|
||||
</a>
|
||||
<div className="w-full md:block md:w-auto">
|
||||
<ul className="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 pl-3 pr-4 hover:underline"
|
||||
href="{% url 'add_game' %}"
|
||||
>
|
||||
New Game
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 pl-3 pr-4 hover:underline"
|
||||
href="{% url 'add_platform' %}"
|
||||
>
|
||||
New Platform
|
||||
</a>
|
||||
</li>
|
||||
{/* {% if game_available and platform_available %} */}
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 pl-3 pr-4 hover:underline"
|
||||
href="{% url 'add_purchase' %}"
|
||||
>
|
||||
New Purchase
|
||||
</a>
|
||||
</li>
|
||||
{/* {% endif %} */}
|
||||
{/* {% if purchase_available %} */}
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 pl-3 pr-4 hover:underline"
|
||||
href="{% url 'add_session' %}"
|
||||
>
|
||||
New Session
|
||||
</a>
|
||||
</li>
|
||||
{/* {% endif %} */}
|
||||
{/* {% if session_count > 0 %} */}
|
||||
<li>
|
||||
<a
|
||||
className="block py-2 pl-3 pr-4 hover:underline"
|
||||
href="{% url 'list_sessions' %}"
|
||||
>
|
||||
All Sessions
|
||||
</a>
|
||||
</li>
|
||||
{/* {% endif %} */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Nav
|
||||
Loading…
Reference in New Issue