C

Refine•2y ago•

3 replies

colossal-harlequin

How to change the header from 'refine project' to my own

This is my index.tsx file for header component
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
import { useGetIdentity } from "@refinedev/core";
import {
Layout as AntdLayout,
Avatar,
Space,
Switch,
Typography,
theme,
} from "antd";
import React, { useContext } from "react";
import { ColorModeContext } from "../../contexts/color-mode";

const { Text } = Typography;
const { useToken } = theme;

type IUser = {
id: number;
name: string;
avatar: string;
};

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
sticky,
}) => {
const { token } = useToken();
const { data: user } = useGetIdentity<IUser>();
const { mode, setMode } = useContext(ColorModeContext);

const headerStyles: React.CSSProperties = {
backgroundColor: token.colorBgElevated,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
padding: "0px 24px",
height: "64px",
};

if (sticky) {
headerStyles.position = "sticky";
headerStyles.top = 0;
headerStyles.zIndex = 1;
}

return (
<AntdLayout.Header style={headerStyles}>
<Space>
<Switch
checkedChildren=""
unCheckedChildren=""
onChange={() => setMode(mode === "light" ? "dark" : "light")}
defaultChecked={mode === "dark"}
/>
<Space style={{ marginLeft: "8px" }} size="middle">
{user?.name && <Text strong>{user.name}</Text>}
{user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
</Space>
</Space>
</AntdLayout.Header>
);
};