Add Nav component
This commit is contained in:
parent
04e6b01c2a
commit
da5783c08f
SSH Key Fingerprint:
SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
|
|
@ -10,7 +10,10 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
|
"eslint-config-prettier": "^8.6.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
|
"prettier": "^2.8.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"tailwindcss": "^3.2.4"
|
"tailwindcss": "^3.2.4"
|
||||||
|
|
@ -19,6 +22,7 @@
|
||||||
"@types/react": "^18.0.26",
|
"@types/react": "^18.0.26",
|
||||||
"@types/react-dom": "^18.0.9",
|
"@types/react-dom": "^18.0.9",
|
||||||
"@vitejs/plugin-react": "^3.0.0",
|
"@vitejs/plugin-react": "^3.0.0",
|
||||||
|
"eslint": "^8.32.0",
|
||||||
"vite": "^4.0.0"
|
"vite": "^4.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,20 @@
|
||||||
import { useState } from 'react'
|
import { useState } from "react";
|
||||||
import './App.css'
|
import "./App.css";
|
||||||
|
import Nav from "./components/Nav";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0)
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="dark:bg-gray-800 min-h-screen">
|
<div className="dark:bg-gray-800 min-h-screen">
|
||||||
<nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
|
<Nav />
|
||||||
<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 %} */}
|
{/* {% block content %}No content here.{% endblock content %} */}
|
||||||
</div>
|
</div>
|
||||||
{/* {% load version %} */}
|
{/* {% load version %} */}
|
||||||
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
{/* <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