diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index bcffa81..5394b02 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,20 +1,24 @@
import type { PropsWithChildren } from 'react';
-import { Flex } from '@radix-ui/themes';
+import { Logo } from '@/components/logo';
+import { Container, Flex } from '@radix-ui/themes';
export default function AuthLayout(props: PropsWithChildren) {
return (
-
- {props.children}
-
+
+
+
+ {props.children}
+
+
);
}
diff --git a/app/(auth)/sign-in/page.stories.tsx b/app/(auth)/sign-in/page.stories.tsx
new file mode 100644
index 0000000..8073432
--- /dev/null
+++ b/app/(auth)/sign-in/page.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SignInPage from './page';
+
+const meta: Meta = {
+ component: SignInPage,
+};
+
+export const Default: StoryObj = {
+ render: () => ,
+};
+
+export default meta;
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index 468b058..dcdfd59 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -1,9 +1,37 @@
-import { Button } from '@radix-ui/themes';
+import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { FaSpotify } from 'react-icons/fa';
export default function Page() {
return (
-
+
+ Welcome to Beecast
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod
+ quia quibusdam quos quae.
+
+
+
+
+
+ By clicking continue, you acknowledge that you have read and understood,
+ and agree to our{' '}
+
+ Terms of Service
+ {' '}
+ and{' '}
+
+ Privacy Policy
+
+ .
+
+
);
}
diff --git a/components/layout/app-header-logo.tsx b/components/layout/app-header-logo.tsx
new file mode 100644
index 0000000..582a328
--- /dev/null
+++ b/components/layout/app-header-logo.tsx
@@ -0,0 +1,24 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import Link from 'next/link';
+
+import { Logo } from '../logo';
+
+export function AppHeaderLogo() {
+ return (
+
+
+
+
+
+ Beecast
+
+
+
+ );
+}
diff --git a/components/layout/app-header.tsx b/components/layout/app-header.tsx
index 2fc8dbd..c0de3ca 100644
--- a/components/layout/app-header.tsx
+++ b/components/layout/app-header.tsx
@@ -1,16 +1,9 @@
import { ArrowRightIcon, PersonIcon } from '@radix-ui/react-icons';
-import {
- Avatar,
- Button,
- DropdownMenu,
- Flex,
- Heading,
- Text,
-} from '@radix-ui/themes';
-import Image from 'next/image';
+import { Avatar, Button, DropdownMenu, Flex, Text } from '@radix-ui/themes';
import Link from 'next/link';
import { AppContent } from './app-content';
+import { AppHeaderLogo } from './app-header-logo';
type Props =
| {
@@ -83,27 +76,7 @@ export function AppHeader(props: Props) {
-
-
-
-
-
- Beecast
-
-
-
+
{props.variant === 'authenticated' ? (
diff --git a/components/logo.tsx b/components/logo.tsx
new file mode 100644
index 0000000..e8db0d3
--- /dev/null
+++ b/components/logo.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+
+import Image from 'next/image';
+
+type Props = {
+ size?: ComponentProps['width'];
+};
+
+export function Logo(props: Props) {
+ return (
+
+ );
+}
diff --git a/components/theme-provider/styles.css b/components/theme-provider/styles.css
index a3de752..71a8267 100644
--- a/components/theme-provider/styles.css
+++ b/components/theme-provider/styles.css
@@ -3,3 +3,7 @@
body {
margin: 0;
}
+
+.radix-themes {
+ --cursor-button: pointer;
+}
diff --git a/package.json b/package.json
index 1f9e6ce..2e48ad6 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"next-themes": "1.0.0-beta.0",
"react": "^18",
"react-dom": "^18",
+ "react-icons": "^4.12.0",
"zod": "^3.22.4"
},
"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfd0439..0b7ed60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
react-dom:
specifier: ^18
version: 18.2.0(react@18.2.0)
+ react-icons:
+ specifier: ^4.12.0
+ version: 4.12.0(react@18.2.0)
zod:
specifier: ^3.22.4
version: 3.22.4
@@ -10897,6 +10900,14 @@ packages:
react-is: 18.1.0
dev: true
+ /react-icons@4.12.0(react@18.2.0):
+ resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==}
+ peerDependencies:
+ react: '*'
+ dependencies:
+ react: 18.2.0
+ dev: false
+
/react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: true