Built Twitter Like App - 7

日常练习

Install Zustand

1
npm install zustand

Add Hooks

Add file hooks/useLoginModal.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { create } from "zustand";

interface LoginModalStore{
  isOpen: boolean;
  onOpen: ()=> void;
  onClose: ()=> void;
};

const useLoginModal = create<LoginModalStore>((set) =>({
  isOpen: true,
  onOpen: () => set({ isOpen: true}),
  onClose: () => set({ isOpen: false})
}));

export default useLoginModal;
More...

Built Twitter Like App - 6

日常练习

Add ModalBox

Modify file pages/_app.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import '../styles/globals.css'
import type { AppProps } from 'next/app'

import Layout from '../components/Layout'
import ModalBox from '../components/ModalBox'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <ModalBox actionLabel='Submit' isOpen title='Test Modal' />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

More...

Built Twitter Like App - 4

日常练习

Add FollowBar

Modify file conmponent/Layout.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import FollowBar from "./layout/FollowBar";
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
                <FollowBar />
            </div>  
        </div>
     </div>
   );
}

export default Layout;
More...

Built Twitter Like App - 3

日常练习

Install Icon

1
npm install react-icons

Add Sidebar Item

Modify file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { BsHouseFill, BsBellFill } from 'react-icons/bs'
import { FaUser } from 'react-icons/fa'
import { BiLogOut } from 'react-icons/bi'

import SidebarLog from './SidebarLogo'
import SidebarItem from './SidebarItem'
import SiderbarTweetButton from './SiderbarTweetButton'

const Sidebar = () => {
    const items = [
        {
            label: 'Home',
            href:'/',
            icon: BsHouseFill
        },
        {
            label: 'Notifications',
            href:'/notifications',
            icon: BsBellFill
        },       
        {
            label: 'Profile',
            href:'/users/123',
            icon: FaUser
        },
        
    ]
    
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}

                <SidebarItem onclick={() => {}} icon={ BiLogOut } label='Logout' href='/'  />
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
}

export default Sidebar
More...

Built Twitter Like App - 2

日常练习

Add basic layout

Add file components/Layout.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
            </div>  
        </div>
     </div>
   );
}

export default Layout;

Add file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9
const Sidebar = () => {
    return(
        <div>

        </div>
    );
}

export default Sidebar
More...

Five Principles of Prompting

当日所学

  1. Give Direction: Describe the desired style in detail, or reference a relevant persona.

    给出方向：详细描述所需的风格，或参考相关的人物角色。

  2. Specify Format: Define what rules to follow, and the required structure of the response.

    指定格式：定义要遵循的规则以及所需的响应结构。

  3. Provide Examples: Insert a diverse set of test cases where the task was done correctly.

    提供示例：插入正确完成任务的一组不同的测试用例。

  4. Evaluate Quality: Identify errors and rate responses, testing what drives performance.

    评估质量：识别错误并对响应进行评级，测试驱动性能的因素。

  5. Divide Labor: Split tasks into multiple steps, chained together for complex goals.

    分工：将任务分成多个步骤，链接在一起以实现复杂的目标。

请我喝杯咖啡吧~

支付宝
微信