New: Hero Page und Navigation
This commit is contained in:
26
web/src/components/Hero/Hero.stories.tsx
Normal file
26
web/src/components/Hero/Hero.stories.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
// Pass props to your component by passing an `args` object to your story
|
||||
//
|
||||
// ```tsx
|
||||
// export const Primary: Story = {
|
||||
// args: {
|
||||
// propName: propValue
|
||||
// }
|
||||
// }
|
||||
// ```
|
||||
//
|
||||
// See https://storybook.js.org/docs/react/writing-stories/args.
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import Hero from './Hero'
|
||||
|
||||
const meta: Meta<typeof Hero> = {
|
||||
component: Hero,
|
||||
tags: ['autodocs'],
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof Hero>
|
||||
|
||||
export const Primary: Story = {}
|
||||
14
web/src/components/Hero/Hero.test.tsx
Normal file
14
web/src/components/Hero/Hero.test.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { render } from '@redwoodjs/testing/web'
|
||||
|
||||
import Hero from './Hero'
|
||||
|
||||
// Improve this test with help from the Redwood Testing Doc:
|
||||
// https://redwoodjs.com/docs/testing#testing-components
|
||||
|
||||
describe('Hero', () => {
|
||||
it('renders successfully', () => {
|
||||
expect(() => {
|
||||
render(<Hero />)
|
||||
}).not.toThrow()
|
||||
})
|
||||
})
|
||||
117
web/src/components/Hero/Hero.tsx
Normal file
117
web/src/components/Hero/Hero.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import React, { useEffect } from 'react'
|
||||
|
||||
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
import { navigate, routes } from '@redwoodjs/router'
|
||||
|
||||
import { useAuth } from 'src/auth'
|
||||
|
||||
export default function Hero() {
|
||||
const { isAuthenticated } = useAuth()
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
navigate(routes.dashboard())
|
||||
}
|
||||
}, [isAuthenticated])
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<div className="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20">
|
||||
<div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40">
|
||||
<div className="px-6 lg:px-0 lg:pt-4">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="max-w-lg">
|
||||
<img
|
||||
className="h-11"
|
||||
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
/>
|
||||
<div className="mt-24 sm:mt-32 lg:mt-16">
|
||||
<a
|
||||
href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24/releases"
|
||||
className="inline-flex space-x-6"
|
||||
>
|
||||
<span className="rounded-full bg-indigo-600/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-600/10">
|
||||
What"s new
|
||||
</span>
|
||||
<span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-600">
|
||||
<span>Just shipped v0.1.0</span>
|
||||
<ChevronRightIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
|
||||
Nachhilfesystem SZU
|
||||
</h1>
|
||||
<p className="mt-6 text-lg leading-8 text-gray-600">
|
||||
Hier ist das neue Nachhilfesystem für das SZU! Klicke unten
|
||||
auf den Link, um dich mit deinem Microsoft Konto anzumelden.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center gap-x-6">
|
||||
<a
|
||||
href={`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${
|
||||
process.env.MICROSOFT_OAUTH_CLIENT_ID
|
||||
}&grant_type=authorization_code&response_type=code&redirect_uri=${
|
||||
process.env.MICROSOFT_OAUTH_REDIRECT_URI
|
||||
}&scope=${process.env.MICROSOFT_OAUTH_SCOPES.split(' ').join('+')}`}
|
||||
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Anmelden
|
||||
</a>
|
||||
<a
|
||||
href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24"
|
||||
className="text-sm font-semibold leading-6 text-gray-900"
|
||||
>
|
||||
View on Gitea <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
|
||||
<div
|
||||
className="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 md:-mr-20 lg:-mr-36"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="shadow-lg md:rounded-3xl">
|
||||
<div className="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
|
||||
<div
|
||||
className="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
|
||||
<div className="mx-auto max-w-2xl md:mx-0 md:max-w-none">
|
||||
<div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
|
||||
<div className="flex bg-gray-800/40 ring-1 ring-white/5">
|
||||
<div className="-mb-px flex text-sm font-medium leading-6 text-gray-400">
|
||||
<div className="border-b border-r border-b-white/20 border-r-white/10 bg-white/5 px-4 py-2 text-white">
|
||||
NotificationSetting.jsx
|
||||
</div>
|
||||
<div className="border-r border-gray-600/10 px-4 py-2">
|
||||
App.jsx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 pb-14 pt-6">
|
||||
{/* Your code example */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 md:rounded-3xl"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user