diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx index 038c98f..96bb536 100644 --- a/apps/web/app/(main)/layout.tsx +++ b/apps/web/app/(main)/layout.tsx @@ -1,9 +1,11 @@ +import { Header } from '@/components/header'; import { BottomNav } from '@/components/navigation'; import { type PropsWithChildren } from 'react'; export default async function Layout({ children }: Readonly) { return (
+
{children}
diff --git a/apps/web/components/header/index.tsx b/apps/web/components/header/index.tsx new file mode 100644 index 0000000..17a4bbd --- /dev/null +++ b/apps/web/components/header/index.tsx @@ -0,0 +1,10 @@ +import { Profile } from './profile'; + +export function Header() { + return ( +
+
+ +
+ ); +} diff --git a/apps/web/components/header/profile.tsx b/apps/web/components/header/profile.tsx new file mode 100644 index 0000000..cf1931f --- /dev/null +++ b/apps/web/components/header/profile.tsx @@ -0,0 +1,19 @@ +import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar'; + +type Props = { + readonly fallback: string; + readonly src: string; + readonly username: string; +}; + +export function Profile({ fallback, src, username }: Props) { + return ( +
+ {username} + + + {fallback} + +
+ ); +} diff --git a/apps/web/components/navigation/navbar.tsx b/apps/web/components/navigation/navbar.tsx index 9f366cf..311dee3 100644 --- a/apps/web/components/navigation/navbar.tsx +++ b/apps/web/components/navigation/navbar.tsx @@ -8,7 +8,7 @@ export function BottomNav() { } label="Главное" /> } label="Записи" /> } label="Новая запись" /> - } label="Мастера" /> + } label="Контакты" /> } label="Профиль" /> diff --git a/packages/typescript-config/react-library.json b/packages/typescript-config/react-library.json index c3a1b26..bb7c910 100644 --- a/packages/typescript-config/react-library.json +++ b/packages/typescript-config/react-library.json @@ -2,6 +2,8 @@ "$schema": "https://json.schemastore.org/tsconfig", "extends": "./base.json", "compilerOptions": { - "jsx": "react-jsx" + "jsx": "react-jsx", + "moduleResolution": "Bundler", + "module": "ESNext", } } diff --git a/packages/ui/package.json b/packages/ui/package.json index 800f6d2..45d7c20 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -45,6 +45,7 @@ "typescript": "catalog:" }, "dependencies": { + "@radix-ui/react-avatar": "^1.1.2", "react": "catalog:", "react-dom": "catalog:" } diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx new file mode 100644 index 0000000..0801841 --- /dev/null +++ b/packages/ui/src/components/ui/avatar.tsx @@ -0,0 +1,45 @@ +'use client'; +import { cn } from '@/src/lib/utils'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; +import * as React from 'react'; + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarFallback, AvatarImage }; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index c8d2dcb..bac6204 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,5 +1,5 @@ +import { cn } from '@/src/lib/utils'; import { Slot } from '@radix-ui/react-slot'; -import { cn } from '@repo/ui/lib/utils'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; @@ -19,14 +19,11 @@ const buttonVariants = cva( }, variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: - 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', - outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: - 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', }, }, }, @@ -41,11 +38,7 @@ const Button = React.forwardRef( ({ asChild = false, className, size, variant, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( - + ); }, ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c65ad23..fcfebb0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -256,6 +256,9 @@ importers: packages/ui: dependencies: + '@radix-ui/react-avatar': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) react: specifier: 'catalog:' version: 19.0.0 @@ -1708,6 +1711,19 @@ packages: engines: {node: '>=18'} hasBin: true + '@radix-ui/react-avatar@1.1.2': + resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-compose-refs@1.1.0': resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} peerDependencies: @@ -1717,6 +1733,37 @@ packages: '@types/react': optional: true + '@radix-ui/react-compose-refs@1.1.1': + resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-context@1.1.1': + resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-primitive@2.0.1': + resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.1.0': resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} peerDependencies: @@ -1726,6 +1773,33 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.1.1': + resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-callback-ref@1.1.0': + resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-layout-effect@1.1.0': + resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@repeaterjs/repeater@3.0.4': resolution: {integrity: sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==} @@ -7186,12 +7260,45 @@ snapshots: dependencies: playwright: 1.49.1 + '@radix-ui/react-avatar@1.1.2(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@radix-ui/react-context': 1.1.1(@types/react@19.0.1)(react@19.0.0) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.1)(react@19.0.0) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.1)(react@19.0.0) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + optionalDependencies: + '@types/react': 19.0.1 + '@types/react-dom': 19.0.1 + '@radix-ui/react-compose-refs@1.1.0(@types/react@19.0.1)(react@19.0.0)': dependencies: react: 19.0.0 optionalDependencies: '@types/react': 19.0.1 + '@radix-ui/react-compose-refs@1.1.1(@types/react@19.0.1)(react@19.0.0)': + dependencies: + react: 19.0.0 + optionalDependencies: + '@types/react': 19.0.1 + + '@radix-ui/react-context@1.1.1(@types/react@19.0.1)(react@19.0.0)': + dependencies: + react: 19.0.0 + optionalDependencies: + '@types/react': 19.0.1 + + '@radix-ui/react-primitive@2.0.1(@types/react-dom@19.0.1)(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': + dependencies: + '@radix-ui/react-slot': 1.1.1(@types/react@19.0.1)(react@19.0.0) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) + optionalDependencies: + '@types/react': 19.0.1 + '@types/react-dom': 19.0.1 + '@radix-ui/react-slot@1.1.0(@types/react@19.0.1)(react@19.0.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.0.1)(react@19.0.0) @@ -7199,6 +7306,25 @@ snapshots: optionalDependencies: '@types/react': 19.0.1 + '@radix-ui/react-slot@1.1.1(@types/react@19.0.1)(react@19.0.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.0.1)(react@19.0.0) + react: 19.0.0 + optionalDependencies: + '@types/react': 19.0.1 + + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.0.1)(react@19.0.0)': + dependencies: + react: 19.0.0 + optionalDependencies: + '@types/react': 19.0.1 + + '@radix-ui/react-use-layout-effect@1.1.0(@types/react@19.0.1)(react@19.0.0)': + dependencies: + react: 19.0.0 + optionalDependencies: + '@types/react': 19.0.1 + '@repeaterjs/repeater@3.0.4': {} '@repeaterjs/repeater@3.0.6': {}