diff --git a/public/listening-ear.svg b/public/listening-ear.svg new file mode 100644 index 0000000..9afa7fc --- /dev/null +++ b/public/listening-ear.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..b9b714b --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,55 @@ +import { type NextPage } from "next"; +import Image from 'next/image'; +import Link from "next/link"; + +interface NavBarLinkProps { + href: string; + label: string; +} + +const NavBarLink = ({href, label}: NavBarLinkProps) => { + return ( +
  • + + {label} + +
    • + ); +} + +const NavBar = () => { + return ( + + ) +} + +const Header: NextPage = () => { + return <> +
    +
    + Ear listening +
    +
    +

    Center for Auditory Training Resources

    +
    +
    + Ear listening +
    +
    + + +}; + +export default Header; \ No newline at end of file diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 81e8bcc..91b6e1f 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react"; import { api } from "~/utils/api"; import "~/styles/globals.css"; +import Header from "~/components/Header"; const MyApp: AppType<{ session: Session | null }> = ({ Component, @@ -12,6 +13,7 @@ const MyApp: AppType<{ session: Session | null }> = ({ }) => { return ( +
    ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 97ec863..b97133d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,83 +1,20 @@ import { type NextPage } from "next"; import Head from "next/head"; -import Link from "next/link"; -import { signIn, signOut, useSession } from "next-auth/react"; - -import { api } from "~/utils/api"; const Home: NextPage = () => { - const hello = api.example.hello.useQuery({ text: "from tRPC" }); return ( <> - Create T3 App - + ATR + -
    -
    -

    - Create T3 App -

    -
    - -

    First Steps →

    -
    - Just the basics - Everything you need to know to set up your - database and authentication. -
    - - -

    Documentation →

    -
    - Learn more about Create T3 App, the libraries it uses, and how - to deploy it. -
    - -
    -
    -

    - {hello.data ? hello.data.greeting : "Loading tRPC query..."} -

    - -
    -
    +
    +

    under construction

    ); }; export default Home; - -const AuthShowcase: React.FC = () => { - const { data: sessionData } = useSession(); - - const { data: secretMessage } = api.example.getSecretMessage.useQuery( - undefined, // no input - { enabled: sessionData?.user !== undefined }, - ); - - return ( -
    -

    - {sessionData && Logged in as {sessionData.user?.name}} - {secretMessage && - {secretMessage}} -

    - -
    - ); -};