feat: PostTypesLIst component, create Post Page, text-editor enable link

src/Components/Inputs/TextEditor/TextEditor.tsx

@@ -41,7 +41,7 @@ export default function TextEditor({ placeholder, initialContent }: Props) {
     const linkExtension = useMemo(() => {
         const extension = new LinkExtension({ autoLink: true });
         extension.addHandler('onClick', (_, data) => {
-            alert(`You clicked link: ${JSON.stringify(data)}`);
+            window.open(data.href, '_blank')?.focus();
             return true;
         });
         return extension;

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx

@@ -42,7 +42,7 @@ export default function ContentEditor({ placeholder, initialContent, name }: Pro
     const linkExtension = useMemo(() => {
         const extension = new LinkExtension({ autoLink: true });
         extension.addHandler('onClick', (_, data) => {
-            alert(`You clicked link: ${JSON.stringify(data)}`);
+            window.open(data.href, '_blank')?.focus();
             return true;
         });
         return extension;

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/styles.module.scss

@@ -6,6 +6,16 @@
             overflow: hidden;
             border-bottom-left-radius: inherit;
             border-bottom-right-radius: inherit;
+
+
+            a{
+                color: rgb(54, 139, 236);
+
+                &:hover{
+                    text-decoration: underline;
+                    cursor: pointer;
+                }
+            }
         }
         
         .ProseMirror,

src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx

@@ -43,15 +43,12 @@ export default function StoryForm() {
         resolver: yupResolver(schema) as Resolver<IFormInputs>,
         defaultValues: {
             title: '',
-            tags: [{
-                title: 'tag 1'
-            }],
+            tags: [],
             body: '',
-            cover_image: 'https://i.picsum.photos/id/10/1600/900.jpg?hmac=9R7fIkKwC5JxHx8ayZAKNMt6FvJXqKKyiv8MClikgDo'
+            cover_image: ''
         }
-
     });
-    const { handleSubmit, control, register, formState: { errors }, watch, } = formMethods;
+    const { handleSubmit, control, register, formState: { errors }, } = formMethods;
 
     const onSubmit: SubmitHandler<IFormInputs> = data => console.log(data);
 
@@ -63,8 +60,6 @@ export default function StoryForm() {
                 <div
                     className='bg-white shadow-lg rounded-8 overflow-hidden'>
                     <div className="p-32">
-
-
                         <Controller
                             control={control}
                             name="cover_image"

src/features/Posts/pages/CreatePostPage/CreatePostPage.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import CreatePostPage from './CreatePostPage';
+
+export default {
+    title: 'Posts/Create Post Page',
+    component: CreatePostPage,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof CreatePostPage>;
+
+
+const Template: ComponentStory<typeof CreatePostPage> = (args) => <CreatePostPage {...args as any} ></CreatePostPage>
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Posts/pages/CreatePostPage/CreatePostPage.tsx

@@ -1,9 +1,31 @@
+import { useState } from "react";
+import StoryForm from "./Components/StoryForm/StoryForm";
+import PostTypeList from "./PostTypeList";
+
 interface Props {
 
 }
 
 export default function CreatePostPage() {
+
+    const [postType, setPostType] = useState<'story' | 'bounty' | 'question'>('story');
+
     return (
-        <div>CreatePostPage</div>
+        <div
+            className="page-container grid gap-32"
+            style={{ gridTemplateColumns: "326px 1fr" }}
+        >
+            <div>
+                <PostTypeList selectionChanged={setPostType} />
+            </div>
+            <div>
+                {postType === 'story' && <>
+                    <h2 className="text-h2 font-bolder text-gray-800 mb-32">
+                        Create Story
+                    </h2>
+                    <StoryForm />
+                </>}
+            </div>
+        </div>
     )
 }

src/features/Posts/pages/CreatePostPage/PostTypeList.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+
+const types = [
+    {
+        text: "📜 Story",
+        value: 'story'
+    }, {
+        text: "💰 Bounty",
+        value: 'bounty'
+    }, {
+        text: "❓ Question",
+        value: 'question'
+    },
+] as const;
+
+type Value = typeof types[number]['value'];
+
+interface Props {
+    selectionChanged?: (newFilter: Value) => void
+}
+
+export default function PostTypeList({ selectionChanged }: Props) {
+
+    const [selected, setSelected] = useState<Value>(types[0].value);
+
+    const handleClick = (newValue: Value) => {
+        if (selected === newValue)
+            return
+        setSelected(newValue);
+        selectionChanged?.(newValue);
+    }
+
+    return (
+        <div className=''>
+            <p className="text-body2 font-bolder text-black mb-16">Type of post</p>
+            <ul>
+                {types.map((f, idx) => <li
+                    key={f.value}
+                    className={`p-12 rounded-8 cursor-pointer font-bold ${f.value === selected && 'bg-gray-100'}`}
+                    onClick={() => handleClick(f.value)}
+                >
+                    {f.text}
+                </li>)}
+            </ul>
+        </div>
+    )
+}