Skip to content

Commit

Permalink
feat(docs): update refine hr showcase images (#6361)
Browse files Browse the repository at this point in the history
  • Loading branch information
alicanerdurmaz authored Sep 23, 2024
1 parent 8be95d8 commit bf26795
Showing 1 changed file with 90 additions and 49 deletions.
139 changes: 90 additions & 49 deletions documentation/src/refine-theme/landing-hero-showcase-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -416,24 +416,25 @@ const ShowcaseHR = ({ className }: { className?: string }) => {
return (
<ShowcaseWrapper
className={className}
render="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr/base_render.png"
render="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/base_render.png"
highlights={[
{
x: 268,
y: 184,
width: 496,
height: 260,
x: 244,
y: 254,
width: 520,
height: 296,
render:
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr/inbox.png",
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/notifications.png",
codePosition: "right",
code: `
import { useList } from "@refinedev/core";
const { data } = useList({
resource: "notifications",
liveMode: "auto",
filters: [
{
field: "is_read",
field: "isRead",
operator: "eq",
value: false
},
Expand All @@ -444,65 +445,105 @@ const ShowcaseHR = ({ className }: { className?: string }) => {
{
x: 12,
y: 174,
width: 200,
height: 344,
width: 204,
height: 360,
render:
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr/sider.png",
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/menu.png",
codePosition: "right",
code: `
import { useMenu } from "@refinedev/core";
import Link from "next/link";
const { menuItems } = useMenu();
return menuItems.map((item) => (
<Link to={item.route}>
{item.icon}
{item.label}
</Link>
));
`,
import { useMenu, Link, CanAccess } from "@refinedev/core";
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
const Sider = () => {
const { menuItems, selectedKey } = useMenu();
return (
<List>
{menuItems.map((item) => (
<CanAccess key={item.key} action="list" resource={item.name}>
<ListItem>
<ListItemButton component={Link} selected={selectedKey === item.key} to={item.route}>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText>{item.label}</ListItemText>
</ListItemButton>
</ListItem>
</CanAccess>
))}
</List>
);
};
`,
},
{
x: 788,
y: 184,
width: 332,
height: 260,
y: 254,
width: 356,
height: 296,
render:
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr/poll.png",
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/poll.png",
codePosition: "left",
code: `
import { useList } from "@refinedev/core";
import { useList } from "@refinedev/core";
const { data } = useList({
resource: "polls",
filters: [
{ field: "is_active", operator: "eq", value: true },
],
pagination: { current: 1, pageSize: 1 }
});
const { data } = useList({
resource: "polls",
filters: [{ field: "status", operator: "eq", value: "active" }],
pagination: { current: 1, pageSize: 1 },
liveMode: "auto",
});
`,
},
{
x: 736,
y: 24,
width: 384,
height: 112,
x: 978,
y: 22,
width: 166,
height: 36,
render:
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr/timer.png",
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/request-time-off.png",
codePosition: "left",
code: `
import { useGetIdentity, useUpdate } from "@refinedev/core";
const { data: { activeTaskId } } = useGetIdentity();
import { CreateButton } from "@refinedev/mui";
import { TimeOffIcon } from "@/icons";
const { mutate } = useUpdate();
const onBreak = () => mutate({
resource: "tasks",
id: activeTaskId,
values: { is_paused: true },
});
<CreateButton resource="time-offs" startIcon={<TimeOffIcon />}>
Request Time Off
</CreateButton>
`,
},
{
x: 552,
y: 78,
width: 284,
height: 128,
render:
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/showcase-images/hr2/sick-leave.png",
codePosition: "left",
code: `
import { useGetIdentity, useList } from "@refinedev/core";
const { data: { employeeId } } = useGetIdentity();
const { data } = useList({
resource: "time-offs",
pagination: { current: 1, pageSize: 1 },
filters: [
{
field: "employeeId",
operator: "eq",
value: employeeId,
},
{
field: "status",
operator: "eq",
value: "approved",
},
{
field: "type",
operator: "eq",
value: "sick-leave",
},
],
});
const totalSickLeave = data?.total;
`,
},
]}
Expand Down

0 comments on commit bf26795

Please sign in to comment.