todo

import {Button} from "antd";

import "./switcher_button.css"

interface SwitcherButtonProps {

    title: string;

    setIndex: () => void;

    selected: boolean;

}

function SwitcherButton({title, setIndex, selected}: SwitcherButtonProps) {

    return (

        <Button className="switcher_button" type={selected ? "primary" : "text"}

                onClick={setIndex}

        >

            {title}

        </Button>

    );

}

export default SwitcherButton;

 No newline at end of file

.switcher_button {

    width: 33.33%;

}

  text-align: start;

  margin: 0.5rem;

}

.top_padding {

  padding-top: 0.5rem;

}

 No newline at end of file

import {useState} from "react";

import Search from "antd/es/input/Search";

import {Col} from "antd";

export default function SearchPage() {

    const [search, setSearch] = useState("");

    console.log(search);

    return (

        <Col>

            <Search

                placeholder="Search recipient"

                style={{width: '13rem'}}

                onSearch={(value) => setSearch(value)}

            />

        </Col>

    );

}

 No newline at end of file

import {useState} from "react";

import Search from "antd/es/input/Search";

import {Col, Flex, Row} from "antd";

import "./search_page.css"

import SwitcherButton from "../../components/SwitcherButton/SwitcherButton.tsx";

export default function SearchPage() {

    const [search, setSearch] = useState("");

    const [index, setIndex] = useState(0);

    console.log(search);

    return (

        <Col>

            <Flex justify="center" className="top_padding">

                <Search className="search_page"

                    placeholder="Search recipient" size="large"

                    onSearch={(value) => setSearch(value)}

                />

            </Flex>

            <Row justify="space-around" className="top_padding">

                <SwitcherButton title={"Movies"} selected={index==0} setIndex={() => setIndex(0)}></SwitcherButton>

                <SwitcherButton title={"Users"} selected={index==1} setIndex={() => setIndex(1)}></SwitcherButton>

                <SwitcherButton title={"Clubs"} selected={index==2} setIndex={() => setIndex(2)}></SwitcherButton>

            </Row>

        </Col>

    );

}

 No newline at end of file