refactor: mock data to client side & split it into parts, add new eventType

2026-01-31 12:14:30 +01:00 · 2022-09-04 11:39:41 +03:00
parent 3bebc91d6e
commit 17bcd29be2
18 changed files with 375 additions and 26 deletions
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -69,7 +69,7 @@ export interface NexusGenInputs {
 export interface NexusGenEnums {
  POST_TYPE: "Bounty" | "Question" | "Story"
  RoleLevelEnum: 3 | 0 | 1 | 2 | 4
-  TournamentEventTypeEnum: 2 | 0 | 1
+  TournamentEventTypeEnum: 2 | 3 | 0 | 1
  VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
 }

--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -357,6 +357,7 @@ type TournamentEvent {

 enum TournamentEventTypeEnum {
  IRLMeetup
+  OnlineMeetup
  TwitterSpace
  Workshop
 }
--- a/api/functions/graphql/types/tournament.js
+++ b/api/functions/graphql/types/tournament.js
@@ -44,6 +44,7 @@ const TournamentEventTypeEnum = enumType({
        TwitterSpace: 0,
        Workshop: 1,
        IRLMeetup: 2,
+        OnlineMeetup: 3,
    },
 });

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "my-app",
+  "name": "makers-bolt-fun",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
-      "name": "my-app",
+      "name": "makers-bolt-fun",
      "version": "0.1.0",
      "dependencies": {
        "@apollo/client": "^3.6.9",
@@ -114,6 +114,7 @@
        "@storybook/react": "^6.4.22",
        "@storybook/testing-library": "^0.0.10",
        "@tailwindcss/forms": "^0.5.0",
+        "@tailwindcss/typography": "^0.5.7",
        "@types/chance": "^1.1.3",
        "@types/dompurify": "^2.3.3",
        "@types/fslightbox-react": "^1.4.2",
@@ -15331,6 +15332,21 @@
        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
      }
    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz",
+      "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "8.13.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
@@ -31597,6 +31613,12 @@
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -82386,6 +82408,18 @@
      "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
      "requires": {}
    },
+    "@tailwindcss/typography": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz",
+      "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      }
+    },
    "@testing-library/dom": {
      "version": "8.13.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
@@ -95136,6 +95170,12 @@
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
    },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
--- a/package.json
+++ b/package.json
@@ -166,6 +166,7 @@
    "@storybook/react": "^6.4.22",
    "@storybook/testing-library": "^0.0.10",
    "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/typography": "^0.5.7",
    "@types/chance": "^1.1.3",
    "@types/dompurify": "^2.3.3",
    "@types/fslightbox-react": "^1.4.2",
--- a/src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput.stories.tsx
+++ b/src/Components/Inputs/Selects/BasicSelectInput/BasicSelectInput.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MdOutlineKingBed } from 'react-icons/md';
+
+import BasicSelectInput from './BasicSelectInput';
+
+export default {
+    title: 'Shared/Inputs/Select/Basic',
+    component: BasicSelectInput,
+
+} as ComponentMeta<typeof BasicSelectInput>;
+
+const Template: ComponentStory<typeof BasicSelectInput> = (args) => <BasicSelectInput {...args} />
+
+
+export const Default = Template.bind({});
+Default.args = {
+    // defaultValue: 4,
+    options: [
+        { value: 1, label: "Option 1" },
+        { value: 2, label: 'Option 2' },
+        { value: 3, label: 'Option 3' },
+        { value: 4, label: 'Option 4' },
+    ],
+    onChange: (nv) => alert("New value is: " + nv),
+    labelField: 'label',
+    valueField: "value"
+}
+
+
+
+
--- a/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx
+++ b/src/features/Tournaments/pages/EventsPage/EventCard/EventCard.tsx
@@ -77,7 +77,11 @@ export const mapTypeToBadge: UnionToObjectKeys<Props['event'], 'type', { text: s
        color: "bg-green-50 text-green-500"
    },
    [TournamentEventTypeEnum.IrlMeetup]: {
-        text: "🤝  IRL meetup",
+        text: "🤝 IRL meetup",
        color: "bg-red-50 text-red-500"
    },
+    [TournamentEventTypeEnum.OnlineMeetup]: {
+        text: "🤖 Online meetup",
+        color: "bg-violet-50 text-violet-500"
+    },
 }
--- a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
 import Card from 'src/Components/Card/Card'
 import { Tournament } from 'src/graphql'
 import FAQsSection from './FAQsSection/FAQsSection'
@@ -21,8 +23,11 @@ export default function OverviewPage({ data }: Props) {
        <Card onlyMd className='flex flex-col gap-42'>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
                <div className='md:col-span-2'>
-                    <h2 className='text-body1 font-bolder text-gray-900'>Tournament details</h2>
-                    <p className="text-body4 text-gray-600 mt-16 whitespace-pre-line">{data.description}</p>
+                    <div
+                        className={`text-gray-600 mt-16 prose `}
+                        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked.parse(data.description)) }}
+                    >
+                    </div>
                </div>
                <RegisterCard makers_count={data.makers_count} start_date={data.start_date} />
            </div>
--- a/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
@@ -24,20 +24,24 @@ export default function Navigation({ data }: Props) {
            path: "events",
        },
        {
-            text: `Makers (${data.makers_count})`,
+            text: `????? 🚧`,
            path: "makers",
+            isDisabled: true,
        },
        {
-            text: `Projects (${data.projects_count})`,
+            text: `??????? 🚧`,
            path: "projects",
+            isDisabled: true,
        },
        {
-            text: "Ideas",
+            text: "???? 🚧",
            path: "ideas",
+            isDisabled: true,
        },
        {
-            text: "Resources",
+            text: "?????????? 🚧",
            path: "resources",
+            isDisabled: true,
        },
    ], [data.events_count, data.makers_count, data.projects_count])

@@ -52,8 +56,10 @@ export default function Navigation({ data }: Props) {
                            className={({ isActive }) => ` 
                   min-w-max rounded-48 px-16 py-8 cursor-pointer font-medium text-body5
                    active:scale-95 transition-transform
-                    ${isActive ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 hover:bg-gray-200 text-gray-600'}`}
-                            // onClick={() => filterClicked(f.value)}
+                    ${isActive ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 hover:bg-gray-200 text-gray-600'}
+                    ${link.isDisabled && "pointer-events-none opacity-60"}
+                    `}
+
                            role='button'
                        >
                            {link.text}
--- a/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx
@@ -8,36 +8,40 @@ import OverviewPage from '../OverviewPage/OverviewPage'
 import { Helmet } from 'react-helmet'
 import Navigation from './Navigation/Navigation'
 import EventsPage from '../EventsPage/EventsPage'
+import { tournamentData } from './data'
+
+const data = tournamentData

 export default function TournamentDetailsPage() {

-  const query = useGetTournamentByIdQuery({
-    variables: {
-      id: 12,
-    }
-  })
+  // const query = useGetTournamentByIdQuery({
+  //   variables: {
+  //     id: 12,
+  //   },

-  if (query.loading)
-    return <LoadingPage />
+  // })

-  if (!query.data?.getTournamentById)
-    return <NotFoundPage />
+  // if (query.loading)
+  //   return <LoadingPage />
+
+  // if (!query.data?.getTournamentById)
+  //   return <NotFoundPage />

  return (
    <div style={{
      "--maxPageWidth": "910px"
    } as any}>
      <Helmet>
-        <title>{query.data.getTournamentById.title} Tournament</title>
+        <title>{data.title} Tournament</title>
      </Helmet>
-      <Header data={query.data?.getTournamentById} />
-      <Navigation data={query.data?.getTournamentById} />
+      <Header data={data} />
+      <Navigation data={data} />

      <div className="content-container !mt-24">
        <Routes >
          <Route index element={<Navigate to='overview' />} />
-          <Route path='overview' element={<OverviewPage data={query.data?.getTournamentById} />} />
-          <Route path='events' element={<EventsPage data={query.data?.getTournamentById} />} />
+          <Route path='overview' element={<OverviewPage data={data} />} />
+          <Route path='events' element={<EventsPage data={data} />} />
        </Routes>
      </div>
    </div>
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/description.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/description.ts
@@ -0,0 +1,11 @@
+export const description =
+    `## Tournament Details
+Lorem ipsum dolor sit **amet**, consectetur adipiscing elit. Semper turpis est, ac eget nullam. In leo at pharetra morbi ornare eget. Ultrices posuere senectus purus nulla vitae volutpat id id suspendisse. Urna mattis nulla diam semper erat. Mattis gravida ultrices aliquam odio. Praesent viverra egestas sed elementum nisl imperdiet a, non.  
+
+#### Subtitle1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper turpis est, ac eget nullam. In leo at pharetra morbi ornare eget. Ultrices posuere senectus purus nulla vitae volutpat id id suspendisse. Urna mattis nulla diam semper erat. Mattis gravida ultrices aliquam odio. Praesent viverra egestas sed elementum nisl imperdiet a, non. 
+
+#### Subtitle2
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper turpis est, ac eget nullam. In leo at pharetra morbi ornare eget. Ultrices posuere senectus purus nulla vitae volutpat id id suspendisse. Urna mattis nulla diam semper erat. Mattis gravida ultrices aliquam odio. Praesent viverra egestas sed elementum nisl imperdiet a, non. 
+
+`
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/events.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/events.ts
@@ -0,0 +1,74 @@
+import { Tournament, TournamentEventTypeEnum } from "src/graphql";
+import { getCoverImage } from "src/mocks/data/utils";
+
+
+export const events: Tournament['events'] = [
+    {
+        id: 12,
+        title: "STW3 Round Table #1",
+        date: "13:00 - 14:00 UTC, 23rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.TwitterSpace,
+        website: "https://event.name"
+    },
+    {
+        id: 13,
+        title: "STW3 Round Table #2",
+        date: "15:00 - 16:00 UTC, 23rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.Workshop,
+        website: "https://event.name"
+    },
+    {
+        id: 14,
+        title: "STW3 Round Table #3",
+        date: "13:00 - 14:00 UTC, 24rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.IrlMeetup,
+        website: "https://event.name"
+    },
+    {
+        id: 44,
+        title: "Lightning Login",
+        date: "15:00 - 16:00 UTC, 24rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.Workshop,
+        website: "https://event.name"
+    },
+
+    {
+        id: 46,
+        title: "Escrow contracts",
+        date: "15:00 - 16:00 UTC, 23rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.Workshop,
+        website: "https://event.name"
+    },
+
+    {
+        id: 444,
+        title: "Lsats - What & Why",
+        date: "15:00 - 16:00 UTC, 23rd June",
+        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam morbi pellentesque velit congue. Aliquet rutrum a, augue vitae tincidunt ac egestas. Mauris nec fringilla diam eget fusce malesuada cum parturient. Nulla pretium purus odio odio.",
+        image: getCoverImage(),
+        links: [],
+        location: "Online",
+        type: TournamentEventTypeEnum.Workshop,
+        website: "https://event.name"
+    },
+]
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/faqs.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/faqs.ts
@@ -0,0 +1,54 @@
+import { Tournament } from "src/graphql";
+
+
+export const faqs: Tournament['faqs'] = [
+    {
+        question: "What is Shock the Web?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "When and where will it take place?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "What will we be doing?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "This is my first time hacking on lightning, will there be help?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "This is my first time hacking on lightning, will there be help?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "How many members can I have on my team?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+    {
+        question: "Who will choose the winners?",
+        answer:
+            `Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there. 
+
+Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.`
+    },
+]
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/index.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/index.ts
@@ -0,0 +1,27 @@
+import { Tournament, } from "src/graphql";
+import { description } from "./description";
+import { events } from "./events";
+import { faqs } from "./faqs";
+import { judges } from "./judeges";
+import { prizes } from "./prizes";
+
+export const tournamentData: Tournament = {
+    __typename: "Tournament",
+    id: 12,
+    title: "The Long Night",
+    start_date: "2022-09-30T21:00:00.000Z",
+    end_date: "2022-10-30T22:00:00.000Z",
+    cover_image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/1d5d2c86-fe46-4478-6909-bb3c425c0d00/public",
+    thumbnail_image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/37fb9cd6-e4f1-43f9-c3fe-7c3e119d5600/public",
+    location: "Online",
+    website: "#",
+    description: description,
+    prizes: prizes,
+    events_count: events.length,
+    makers_count: 668,
+    projects_count: 21,
+
+    events: events,
+    judges: judges,
+    faqs: faqs,
+}
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/judeges.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/judeges.ts
@@ -0,0 +1,65 @@
+import { Tournament } from "src/graphql";
+
+
+export const judges: Tournament['judges'] = [
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+    {
+        name: "Ben Arc",
+        avatar: "https://s3-alpha-sig.figma.com/img/5e65/c22c/673b8f74ac43f024b036dbc4e6479e0d?Expires=1662940800&Signature=GR54s7FBcLGcPTVclWdmPjzU92tyrYpdUbbDUYKMUkdQbxq2yQlUhZ-AOLDHhOPY4P2G3aW2yT16b1AUbC8RBx1boH25MSrH-jpn6X57IJA-4ZeHP8zCo-yjTLpb8Gn~vudIi9rPfbwJ34stp-VeOAYMuOHlah3YO-B4MBsBv-NqhP7BMY4zz9vGdBLZhOjYQYdLZ2494Ae6L5FpD1ah3WD3U5qUN9dDvYvAtqYfhQeBOnsG6PfYoq8LouCuERC4S26BeooPg8UdGUCf324-SjEihCoL8mQFq80PSsaAZl5~EBOKRUx14FOprizMusaYN0K06E~fjDIDbM2Rmc9Xjg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+        jobTitle: "Maker"
+    },
+]
--- a/src/features/Tournaments/pages/TournamentDetailsPage/data/prizes.ts
+++ b/src/features/Tournaments/pages/TournamentDetailsPage/data/prizes.ts
@@ -0,0 +1,23 @@
+import { Tournament } from "src/graphql";
+
+
+export const prizes: Tournament['prizes'] = [{
+    title: "stw3  champion",
+    amount: "$ 20k",
+    image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/39217dcf-c900-46be-153f-169e3a1f0400/public",
+},
+{
+    title: "2nd  place",
+    amount: "$ 5k",
+    image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/39cdb7c8-5fbf-49ff-32cf-fdabc3aa2d00/public",
+},
+{
+    title: "3rd  place ",
+    amount: "$ 2k",
+    image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/75958797-73b2-4a62-52df-9f0f98c53900/public",
+},
+{
+    title: "best  design ",
+    amount: "$ 1k",
+    image: "https://imagedelivery.net/wyrwp3c-j0gDDUWgnE7lig/fa7b7cdd-7c06-4ebe-1a2d-94af9d2dae00/public",
+}]
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -527,6 +527,7 @@ export type TournamentEvent = {

 export enum TournamentEventTypeEnum {
  IrlMeetup = 'IRLMeetup',
+  OnlineMeetup = 'OnlineMeetup',
  TwitterSpace = 'TwitterSpace',
  Workshop = 'Workshop'
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -100,5 +100,6 @@ module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/typography'),
  ],
 }