Delete documentation/src/pages/templates/index.tsx
This commit is contained in:
Stefan Pejcic
GitHub
parent
7657f0448e
commit
293151a76c
|
|
@ -1,612 +0,0 @@
|
|||
import Head from "@docusaurus/Head";
|
||||
import React, { SVGProps } from "react";
|
||||
import { CommonHeader } from "@site/src/refine-theme/common-header";
|
||||
import { CommonLayout } from "@site/src/refine-theme/common-layout";
|
||||
import { LandingFooter } from "@site/src/refine-theme/landing-footer";
|
||||
import clsx from "clsx";
|
||||
import { TemplatesHero } from "@site/src/refine-theme/templates-hero";
|
||||
import {
|
||||
Antd,
|
||||
Appwrite,
|
||||
Chakra,
|
||||
Graphql,
|
||||
Headless,
|
||||
Mantine,
|
||||
Medusa,
|
||||
Mui,
|
||||
RestWithoutText,
|
||||
Strapi,
|
||||
Supabase,
|
||||
} from "@site/src/assets/integration-icons";
|
||||
import { TemplatesList } from "@site/src/refine-theme/templates-list";
|
||||
import { TemplatesFilters } from "@site/src/refine-theme/templates-filters";
|
||||
import { TemplatesFilterButton } from "@site/src/refine-theme/templates-filter-button";
|
||||
import { CommonDrawer } from "@site/src/refine-theme/common-drawer";
|
||||
|
||||
const Templates: React.FC = () => {
|
||||
const title = "OpenPanel | Next Generation Hosting Panel";
|
||||
|
||||
const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
|
||||
|
||||
const [filters, setFilters] = React.useState<{
|
||||
uiFramework: string[];
|
||||
backend: string[];
|
||||
}>({
|
||||
uiFramework: [],
|
||||
backend: [],
|
||||
});
|
||||
|
||||
const dataFiltered = React.useMemo(() => {
|
||||
if (!filters.uiFramework.length && !filters.backend.length) {
|
||||
return dataTemplates;
|
||||
}
|
||||
|
||||
return dataTemplates.filter((item) => {
|
||||
return item.integrations.some((integration) => {
|
||||
return (
|
||||
filters.uiFramework.includes(integration.label) ||
|
||||
filters.backend.includes(integration.label)
|
||||
);
|
||||
});
|
||||
});
|
||||
}, [filters]);
|
||||
|
||||
const handleFilterChange = (
|
||||
filter: string,
|
||||
field: keyof typeof filters,
|
||||
) => {
|
||||
setFilters((prev) => {
|
||||
const hasFilter = prev[field].includes(filter);
|
||||
if (hasFilter) {
|
||||
return {
|
||||
...prev,
|
||||
[field]: prev[field].filter((item) => item !== filter),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[field]: [...prev[field], filter],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<html data-active-page="index" />
|
||||
<title>{title}</title>
|
||||
<meta property="og:title" content={title} />
|
||||
<link
|
||||
rel="preload"
|
||||
href="https://refine.new/embed-form"
|
||||
as="document"
|
||||
/>
|
||||
</Head>
|
||||
<CommonLayout description="Build React-based internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.">
|
||||
<div>
|
||||
<CommonHeader />
|
||||
<div
|
||||
className={clsx(
|
||||
"flex flex-col",
|
||||
"pb-12 landing-sm:pb-16 landing-md:pb-20",
|
||||
"px-2 landing-sm:px-0",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full",
|
||||
"mx-auto",
|
||||
"px-2 landing-sm:px-8 landing-md:px-0",
|
||||
"pt-4",
|
||||
"landing-sm:pt-12",
|
||||
"landing-md:pt-0",
|
||||
"w-full max-w-[592px] landing-sm:max-w-[656px] landing-md:max-w-full",
|
||||
)}
|
||||
>
|
||||
<TemplatesHero />
|
||||
<TemplatesFilterButton
|
||||
className={clsx(
|
||||
"flex landing-md:hidden",
|
||||
"mt-6",
|
||||
)}
|
||||
onClick={() => {
|
||||
setIsFilterDrawerOpen(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-full max-w-[592px] landing-sm:max-w-[656px] landing-md:max-w-[896px] landing-lg:max-w-[1200px]",
|
||||
"flex",
|
||||
"items-start",
|
||||
"gap-6",
|
||||
"mx-auto",
|
||||
"mt-12",
|
||||
"relative",
|
||||
"not-prose",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"hidden landing-md:flex",
|
||||
"flex-col",
|
||||
"not-prose",
|
||||
"sticky top-24 left-0",
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
className={clsx(
|
||||
"text-base",
|
||||
"font-semibold",
|
||||
"dark:text-gray-300 text-gray-900",
|
||||
"pl-4",
|
||||
)}
|
||||
>
|
||||
Filter Products
|
||||
</h3>
|
||||
<TemplatesFilters
|
||||
svgId={"sider"}
|
||||
onBackendChange={(backend) => {
|
||||
handleFilterChange(backend, "backend");
|
||||
}}
|
||||
onUIFrameworkChange={(uiFramework) => {
|
||||
handleFilterChange(
|
||||
uiFramework,
|
||||
"uiFramework",
|
||||
);
|
||||
}}
|
||||
className={clsx("min-w-[180px]", "mt-10")}
|
||||
selected={filters}
|
||||
data={dataFilters}
|
||||
/>
|
||||
</div>
|
||||
<TemplatesList data={dataFiltered} />
|
||||
</div>
|
||||
</div>
|
||||
<LandingFooter />
|
||||
</div>
|
||||
<CommonDrawer
|
||||
onClose={() => setIsFilterDrawerOpen(false)}
|
||||
open={isFilterDrawerOpen}
|
||||
title="Filter Templates"
|
||||
>
|
||||
<div className={clsx("flex", "flex-col", "not-prose")}>
|
||||
<TemplatesFilters
|
||||
svgId={"drawer"}
|
||||
onBackendChange={(backend) => {
|
||||
handleFilterChange(backend, "backend");
|
||||
}}
|
||||
onUIFrameworkChange={(uiFramework) => {
|
||||
handleFilterChange(uiFramework, "uiFramework");
|
||||
}}
|
||||
className={clsx("min-w-[180px]")}
|
||||
selected={filters}
|
||||
data={dataFilters}
|
||||
/>
|
||||
</div>
|
||||
</CommonDrawer>
|
||||
</CommonLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type Integration = {
|
||||
uiFrameworks: {
|
||||
label:
|
||||
| "Ant Design"
|
||||
| "Material UI"
|
||||
| "Headless"
|
||||
| "Chakra UI"
|
||||
| "Mantine";
|
||||
icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
|
||||
};
|
||||
backends: {
|
||||
label:
|
||||
| "Supabase"
|
||||
| "Rest API"
|
||||
| "GraphQL"
|
||||
| "Strapi"
|
||||
| "Appwrite"
|
||||
| "Medusa";
|
||||
icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
|
||||
};
|
||||
};
|
||||
|
||||
const dataFilters = {
|
||||
uiFrameworks: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Material UI",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Mui width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Headless",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Headless width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Chakra UI",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Chakra width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Mantine",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Mantine width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
backends: [
|
||||
{
|
||||
label: "Supabase",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Supabase width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "GraphQL",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Graphql width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Strapi",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Strapi width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Appwrite",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Appwrite width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Medusa",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Medusa width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const dataTemplates: {
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
to: string;
|
||||
integrations: (Integration["uiFrameworks"] | Integration["backends"])[];
|
||||
}[] = [
|
||||
{
|
||||
to: "/templates/crm-application",
|
||||
title: "OpenPanel",
|
||||
description:
|
||||
"The user interface for clients to manage their domains, websites and services.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/refine-crm.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "GraphQL",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Graphql width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/next-js-tailwind",
|
||||
title: "E-Commerce Application Storefront",
|
||||
description:
|
||||
"A Headless storefront example built with Refine and Tailwind CSS. Features product listings and a simple shopping cart. Supports SSR with NextJS.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/finefoods-storefront.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Headless",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Headless width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/react-admin-panel",
|
||||
title: "B2B Admin Panel with Material UI",
|
||||
description:
|
||||
"A comprehensive Admin panel template built using Refine and Material UI demonstrating a food ordering system. It includes features such as authentication, a dashboard, and over 10 CRUD interfaces, ranging from orders to user management.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/finefoods-material-ui.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Material UI",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Mui width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/react-admin-panel-ant-design",
|
||||
title: "B2B Internal tool with Ant Design",
|
||||
description:
|
||||
"A comprehensive Admin panel template built using Refine and Ant design demonstrating a food ordering system. It includes features such as authentication, a dashboard, and over 10 CRUD interfaces, ranging from orders to user management.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/finefoods-ant-design.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/next-js-ecommerce-store",
|
||||
title: "Swag Store",
|
||||
description:
|
||||
"A complete headless e-commerce template was built on top of Medusa with Refine. Features a fully working solution with product listings, a shopping cart, and checkout. Supports SSR with NextJS.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/swag-store.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Headless",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Headless width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Medusa",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Medusa width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/supabase-crud-app",
|
||||
title: "Pixels",
|
||||
description:
|
||||
"It is a funny app built with Refine and Supabase, along with a Realtime feature.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/pixels.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Supabase",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Supabase width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/react-pdf-invoice-generator",
|
||||
title: "Invoice Generator - Internal Tool",
|
||||
description:
|
||||
"The Internal Tool template features a PDF Invoice Generator along with CRUD functionalities.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/invoicer.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Strapi",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Strapi width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/win-95-style-admin-panel",
|
||||
title: "Win95 Style Admin Panel",
|
||||
description:
|
||||
"With the headless architecture of Refine, you have the flexibility to implement any custom design!",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/win95.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Headless",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Headless width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Supabase",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Supabase width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/react-crud-app",
|
||||
title: "Realworld Example",
|
||||
description: `"The mother of all demo apps" - Exemplary fullstack Medium.com clone powered by Refine!`,
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/realworld.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Headless",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Headless width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/multitenancy-strapi",
|
||||
title: "Multitenancy App with Strapi",
|
||||
description:
|
||||
"Implementing multitenancy architecture in Refine applications.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/multitenancy-strapi.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Strapi",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Strapi width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/multitenancy-appwrite",
|
||||
title: "Multitenancy App with Appwrite",
|
||||
description:
|
||||
"Implementing multitenancy architecture in Refine applications.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/multitenancy-appwrite.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Appwrite",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Appwrite width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/ant-design-template",
|
||||
title: "Generic Internal Tool Template with Ant Design",
|
||||
description:
|
||||
"Complete internal tool template built with Ant Design. Features authentication and CRUD screens.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/ant-design-template.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Ant Design",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Antd width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/material-ui-template",
|
||||
title: "Generic Internal Tool Template with Material UI",
|
||||
description:
|
||||
"Complete internal tool template built with Material UI. Features authentication and CRUD screens.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/material-ui-template.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Material UI",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Mui width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/chakra-ui-template",
|
||||
title: "Generic Internal Tool Template with Chakra UI",
|
||||
description:
|
||||
"Complete internal tool template built with Chakra UI. Features authentication and CRUD screens.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/chakra-ui-template.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Chakra UI",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Chakra width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/templates/mantine-template",
|
||||
title: "Generic Internal Tool Template with Mantine",
|
||||
description:
|
||||
"Complete internal tool template built with Mantine. Features authentication and CRUD screens.",
|
||||
image: "https://refine.ams3.cdn.digitaloceanspaces.com/templates/mantine-template.jpg",
|
||||
integrations: [
|
||||
{
|
||||
label: "Mantine",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<Mantine width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Rest API",
|
||||
icon: (props: SVGProps<SVGSVGElement>) => (
|
||||
<RestWithoutText width={16} height={16} {...props} />
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default Templates;
|
||||
Loading…
Reference in a new issue