From 293151a76ce03f7522fbea464174716565b22538 Mon Sep 17 00:00:00 2001 From: Stefan Pejcic Date: Wed, 13 Mar 2024 17:07:57 +0100 Subject: [PATCH] Delete documentation/src/pages/templates/index.tsx --- documentation/src/pages/templates/index.tsx | 612 -------------------- 1 file changed, 612 deletions(-) delete mode 100644 documentation/src/pages/templates/index.tsx diff --git a/documentation/src/pages/templates/index.tsx b/documentation/src/pages/templates/index.tsx deleted file mode 100644 index dfd92385..00000000 --- a/documentation/src/pages/templates/index.tsx +++ /dev/null @@ -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 ( - <> - - - {title} - - - - -
- -
-
- - { - setIsFilterDrawerOpen(true); - }} - /> -
-
-
-

- Filter Products -

- { - handleFilterChange(backend, "backend"); - }} - onUIFrameworkChange={(uiFramework) => { - handleFilterChange( - uiFramework, - "uiFramework", - ); - }} - className={clsx("min-w-[180px]", "mt-10")} - selected={filters} - data={dataFilters} - /> -
- -
-
- -
- setIsFilterDrawerOpen(false)} - open={isFilterDrawerOpen} - title="Filter Templates" - > -
- { - handleFilterChange(backend, "backend"); - }} - onUIFrameworkChange={(uiFramework) => { - handleFilterChange(uiFramework, "uiFramework"); - }} - className={clsx("min-w-[180px]")} - selected={filters} - data={dataFilters} - /> -
- - - - ); -}; - -type Integration = { - uiFrameworks: { - label: - | "Ant Design" - | "Material UI" - | "Headless" - | "Chakra UI" - | "Mantine"; - icon: (props: SVGProps) => JSX.Element; - }; - backends: { - label: - | "Supabase" - | "Rest API" - | "GraphQL" - | "Strapi" - | "Appwrite" - | "Medusa"; - icon: (props: SVGProps) => JSX.Element; - }; -}; - -const dataFilters = { - uiFrameworks: [ - { - label: "Ant Design", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Material UI", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Headless", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Chakra UI", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Mantine", - icon: (props: SVGProps) => ( - - ), - }, - ], - backends: [ - { - label: "Supabase", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "GraphQL", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Strapi", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Appwrite", - icon: (props: SVGProps) => ( - - ), - }, - { - label: "Medusa", - icon: (props: SVGProps) => ( - - ), - }, - ], -}; - -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) => ( - - ), - }, - { - label: "GraphQL", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Medusa", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Supabase", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Strapi", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Supabase", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Strapi", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Appwrite", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, - { - 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) => ( - - ), - }, - { - label: "Rest API", - icon: (props: SVGProps) => ( - - ), - }, - ], - }, -]; - -export default Templates;