add profile

3 files changed, 130 insertions, 4 deletions

diff --git a/src/app/globals.css b/src/app/globals.css
index 5ca3a6b..ca0c3c7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,7 +27,6 @@
     --light-violet: #8784c9;
     --dark-indigo: #0d0c1c;
     --red: #e64c4f;
-
     --radius: 0.625rem;
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.13 0.028 261.692);
@@ -106,6 +105,53 @@
     --radius-4xl: calc(var(--radius) + 16px);
 }
 
+@layer utilities {
+    .gradient-0 {
+        background-image: linear-gradient(89.91deg, #8784c9 0%, #464199 99.92%);
+    }
+    .gradient-1 {
+        background-image: linear-gradient(
+            284.32deg,
+            #ffafbd 20.33%,
+            #dae2f8 79.67%
+        );
+    }
+    .gradient-2 {
+        background-image: linear-gradient(267.9deg, #473b7b 0%, #30d2be 100%);
+    }
+    .gradient-3 {
+        background-image: linear-gradient(88.87deg, #c33764 0%, #1d2671 100%);
+    }
+    .gradient-4 {
+        background-image: linear-gradient(267.9deg, #134e5e 0%, #71b280 100%);
+    }
+    .gradient-5 {
+        background-image: linear-gradient(87.9deg, #423aa2 0%, #100626 100%);
+    }
+    .gradient-6 {
+        background-image: linear-gradient(87.9deg, #edf3f6 0%, #d9eaf4 100%);
+    }
+    .gradient-7 {
+        background-image: linear-gradient(
+            284.32deg,
+            #212121 20.33%,
+            #454545 79.67%
+        );
+    }
+    .gradient-8 {
+        background-image: linear-gradient(88.87deg, #610000 0%, #190a05 100%);
+    }
+    .gradient-9 {
+        background-image: linear-gradient(87.9deg, #ffc500 0%, #c21500 100%);
+    }
+    .gradient-10 {
+        background-image: linear-gradient(270deg, #6a11cb 0%, #69a1ff 100%);
+    }
+    .gradient-11 {
+        background-image: linear-gradient(267.9deg, #182848 0%, #4b6cb7 100%);
+    }
+}
+
 @layer base {
     * {
         @apply border-violet outline-ring/50;
diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx
new file mode 100644
index 0000000..cad11bb
--- /dev/null
+++ b/src/app/profile/[username]/page.tsx
@@ -0,0 +1,83 @@
+import Image from 'next/image';
+import { Button } from '@/components/ui';
+import { getUserByUsername } from '@/lib/api/user';
+import { User } from '@/lib/contexts/Auth.context';
+interface ProfilePageProps {
+    params: Promise<{ username: string }>;
+}
+
+export default async function Profile({ params }: ProfilePageProps) {
+    const { username } = await params;
+
+    const profileUser: User = await getUserByUsername(username);
+    const icons = [
+        'facebook',
+        'pinterest',
+        'discord',
+        'artstation',
+        'behance',
+        'instagram',
+    ] as const;
+
+    type IconKey = (typeof icons)[number];
+    return (
+        <>
+            <div className="flex gap-[20px] flex-col">
+                <div className="flex flex-col flex-start padding-0 gap-[20px] h-[551px] w-full">
+                    <div className="gradient-0 flex flex-end padding-[20px] gap-[10px] h-[350px] w-full rounded-[20px]"></div>
+                    <div className="flex flex-col flex-start gap-[10px] w-full h-[181px]">
+                        <div className="flex flex-col gap-1.25">
+                            <p className="font-medium text-[24px]">
+                                {profileUser.username}
+                            </p>
+                        </div>
+                        <div className="flex flex-row items-center gap-1.25 h-[19px]">
+                            <p>
+                                {profileUser.profile?.publications_count ?? 0}{' '}
+                                публикаций
+                            </p>
+                            <p>
+                                {profileUser.profile?.collections_count ?? 0}{' '}
+                                коллекций
+                            </p>
+                            <p>
+                                {profileUser.profile?.followers_count ?? 0}{' '}
+                                подписчиков
+                            </p>
+                            <p>
+                                {profileUser.profile?.following_count ?? 0}{' '}
+                                подписок
+                            </p>
+                        </div>
+                        <div className="flex max-w-[800px] font-regular text-[12px] gap-1.25">
+                            <p>{profileUser.description}</p>
+                        </div>
+                        <div className="flex flex-row flex-end gap-1.25">
+                            {icons
+                                .filter(
+                                    (icon: IconKey) =>
+                                        profileUser.integrations?.[icon],
+                                )
+                                .map((icon: IconKey) => (
+                                    <a
+                                        key={icon}
+                                        href={profileUser.integrations![icon]!}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <img
+                                            src={`/profile/${icon}.svg`}
+                                            alt={icon}
+                                            className="w-[30px] h-[40px]"
+                                        />
+                                    </a>
+                                ))}{' '}
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-row space-between flex-start gap-1.25 w-full h-[42px]"></div>
+                <Button>Управление аккаунтом</Button>
+            </div>
+        </>
+    );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
deleted file mode 100644
index 17e3f62..0000000
--- a/src/app/profile/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Profile() {
-    return <></>;
-}