├── public ├── logo.png ├── favicon.ico ├── logo-dark.png ├── logo-light.png ├── favicon copy.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── thumbnails │ ├── cards.png │ ├── faqs.png │ ├── alerts.png │ ├── badges.png │ ├── gicons.png │ ├── headers.png │ ├── landing.png │ ├── pricing.png │ ├── carousels.png │ ├── pagination.png │ ├── paginator.png │ ├── pill-pity.png │ ├── autocomplete.png │ └── formlayouts.png ├── sponsors │ ├── Oaksprout.jpeg │ └── Anu50640461.jpg ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── site.webmanifest ├── manifest.json └── vercel.svg ├── components ├── utils │ ├── string.ts │ ├── constants.ts │ └── route-categories │ │ ├── forms.json │ │ ├── !fresh.json │ │ ├── getting-started.json │ │ ├── lists.json │ │ ├── application-shells.json │ │ ├── navigation.json │ │ └── parse-categories.ts ├── component-demo │ ├── machine │ │ ├── index.ts │ │ ├── component-demo.dom.ts │ │ ├── component-demo.machine.utils.ts │ │ ├── component-demo.types.ts │ │ └── component-demo.connect.ts │ ├── edit-online.ts │ ├── codesandbox │ │ ├── package.json │ │ ├── src.ts │ │ └── html.ts │ ├── demo-scope.ts │ └── transform-code.ts ├── layouts │ ├── docs │ │ ├── container.tsx │ │ ├── page-transition.tsx │ │ ├── index.tsx │ │ ├── SidebarSection.tsx │ │ └── sidebar.tsx │ └── site.tsx ├── head │ ├── index.tsx │ ├── dynamic.tsx │ └── static.tsx ├── codes │ └── configuration │ │ ├── provider.js │ │ └── custom-theme.js ├── doc-search │ ├── processSearchResult.ts │ ├── result-list.tsx │ ├── handleSearch.ts │ ├── result.tsx │ └── index.tsx ├── splitbee.tsx ├── navbar │ ├── color-mode-toggle.tsx │ ├── action-button.tsx │ ├── sponsor-button.tsx │ └── index.tsx ├── home-link.tsx ├── theme-toggle.tsx ├── nav-link.tsx ├── to-top.tsx ├── docs │ ├── index.tsx │ ├── configuration │ │ ├── custom-theme.js │ │ └── provider.js │ ├── installation │ │ ├── installation.js │ │ ├── introduction.js │ │ └── variables.js │ └── codeblock.tsx ├── sidebar │ ├── sidebar-content.tsx │ ├── index.tsx │ └── sidebar-section.tsx ├── copy-code.tsx ├── site-settings.tsx ├── logo.tsx ├── credits.tsx └── landing │ ├── component-sample.tsx │ ├── sponsors.tsx │ └── landing-hero.tsx ├── .github ├── dependabot.yml └── workflows │ └── push.yml ├── next-env.d.ts ├── theme ├── foundations │ ├── styles-mode.ts │ └── layerStyles.ts ├── styles.ts ├── context.tsx └── index.tsx ├── .eslintrc.json ├── styles ├── globals.css └── Home.module.css ├── pages ├── preview │ ├── new.tsx │ ├── packages │ │ ├── choc-paginator │ │ │ ├── index.js │ │ │ ├── cpz.js │ │ │ ├── more.js │ │ │ ├── prs.js │ │ │ ├── spj.js │ │ │ ├── cpn.js │ │ │ ├── css.js │ │ │ ├── csz.js │ │ │ ├── sm.js │ │ │ ├── fr.js │ │ │ ├── sht.js │ │ │ ├── itr.js │ │ │ └── rpg.js │ │ ├── autocomplete │ │ │ ├── index.js │ │ │ ├── plg.js │ │ │ ├── cur.js │ │ │ ├── ais.js │ │ │ └── group.js │ │ └── pill-pity │ │ │ └── plg.js │ ├── pagination │ │ ├── bp │ │ │ └── index.tsx │ │ ├── bpi │ │ │ └── index.tsx │ │ └── rpg │ │ │ └── index.tsx │ ├── alerts │ │ ├── error │ │ │ └── index.tsx │ │ ├── info │ │ │ └── index.tsx │ │ ├── success │ │ │ └── index.tsx │ │ ├── notification │ │ │ └── index.tsx │ │ └── warning │ │ │ └── index.tsx │ ├── cards │ │ ├── muser │ │ │ └── index.tsx │ │ ├── mtes │ │ │ └── index.tsx │ │ ├── mpro │ │ │ └── index.tsx │ │ ├── pwi │ │ │ └── index.tsx │ │ ├── cpwe │ │ │ └── index.tsx │ │ ├── pwe │ │ │ └── index.tsx │ │ ├── msp │ │ │ └── index.tsx │ │ └── muwd │ │ │ └── index.tsx │ ├── extrael │ │ ├── rpb │ │ │ └── index.tsx │ │ └── snackbar │ │ │ └── index.tsx │ ├── badges │ │ ├── unt │ │ │ └── index.tsx │ │ ├── bwb │ │ │ └── index.tsx │ │ └── bwi │ │ │ └── index.tsx │ ├── heros │ │ └── kh2 │ │ │ └── index.tsx │ ├── gicons │ │ ├── dum │ │ │ └── index.tsx │ │ └── cm │ │ │ └── index.tsx │ ├── cta │ │ ├── was │ │ │ └── index.tsx │ │ ├── swi │ │ │ └── index.tsx │ │ ├── sj │ │ │ └── index.tsx │ │ └── sc │ │ │ └── index.tsx │ ├── tables │ │ └── mrtm │ │ │ └── index.tsx │ └── carousels │ │ └── smc │ │ └── index.tsx ├── _app.tsx ├── docs │ ├── installation.tsx │ ├── configuration.tsx │ ├── [category] │ │ └── [section].tsx │ └── packages │ │ └── pill-pity.tsx ├── _document.tsx └── index.tsx ├── patches └── re-resizable+6.9.9.patch ├── categories ├── forms.json ├── !fresh.json ├── getting-started.json ├── lists.json ├── application-shells.json ├── navigation.json └── parse-categories.ts ├── next.config.js ├── analytics ├── ga-script.tsx └── ads.tsx ├── .gitignore ├── .vscode └── settings.json ├── tsconfig.json ├── LICENSE.md └── package.json /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/logo-dark.png -------------------------------------------------------------------------------- /public/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/logo-light.png -------------------------------------------------------------------------------- /public/favicon copy.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/favicon copy.ico -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/thumbnails/cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/cards.png -------------------------------------------------------------------------------- /public/thumbnails/faqs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/faqs.png -------------------------------------------------------------------------------- /public/sponsors/Oaksprout.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/sponsors/Oaksprout.jpeg -------------------------------------------------------------------------------- /public/thumbnails/alerts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/alerts.png -------------------------------------------------------------------------------- /public/thumbnails/badges.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/badges.png -------------------------------------------------------------------------------- /public/thumbnails/gicons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/gicons.png -------------------------------------------------------------------------------- /public/thumbnails/headers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/headers.png -------------------------------------------------------------------------------- /public/thumbnails/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/landing.png -------------------------------------------------------------------------------- /public/thumbnails/pricing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/pricing.png -------------------------------------------------------------------------------- /public/sponsors/Anu50640461.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/sponsors/Anu50640461.jpg -------------------------------------------------------------------------------- /public/thumbnails/carousels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/carousels.png -------------------------------------------------------------------------------- /public/thumbnails/pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/pagination.png -------------------------------------------------------------------------------- /public/thumbnails/paginator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/paginator.png -------------------------------------------------------------------------------- /public/thumbnails/pill-pity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/pill-pity.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/thumbnails/autocomplete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/autocomplete.png -------------------------------------------------------------------------------- /public/thumbnails/formlayouts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubra266/choc-ui/HEAD/public/thumbnails/formlayouts.png -------------------------------------------------------------------------------- /components/utils/string.ts: -------------------------------------------------------------------------------- 1 | export const toCapitalCase = (string: string) => { 2 | return string.charAt(0).toUpperCase() + string.slice(1); 3 | }; 4 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | open-pull-requests-limit: 10 6 | schedule: 7 | interval: "monthly" 8 | -------------------------------------------------------------------------------- /components/component-demo/machine/index.ts: -------------------------------------------------------------------------------- 1 | export { connect } from "./component-demo.connect"; 2 | export { machine } from "./component-demo.machine"; 3 | export type { UserDefinedContext as Context } from "./component-demo.types"; 4 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /components/layouts/docs/container.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box } from "@chakra-ui/react"; 3 | 4 | export const Container = (props) => ( 5 | 6 | ); 7 | 8 | export default Container; 9 | -------------------------------------------------------------------------------- /theme/foundations/styles-mode.ts: -------------------------------------------------------------------------------- 1 | type modeProps = [prop: string, light: string, dark: string]; 2 | export const mode = (...[prop, light, dark]: modeProps) => { 3 | return { 4 | [prop]: light, 5 | ".chakra-ui-dark &": { 6 | [prop]: dark, 7 | }, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /components/layouts/site.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "components/navbar"; 3 | 4 | const Site = ({ children }) => { 5 | return ( 6 | 7 | 8 | {children} 9 | 10 | ); 11 | }; 12 | export default Site; 13 | -------------------------------------------------------------------------------- /theme/foundations/layerStyles.ts: -------------------------------------------------------------------------------- 1 | import { BoxProps } from "@chakra-ui/react"; 2 | import { mode } from "./styles-mode"; 3 | 4 | const layerStyles: { [key: string]: BoxProps } = { 5 | card: { 6 | ...mode("bg", "white", "gray.700"), 7 | shadow: "base", 8 | }, 9 | }; 10 | export default layerStyles; 11 | -------------------------------------------------------------------------------- /components/head/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Static from "./static"; 3 | import Dynamic from "./dynamic"; 4 | 5 | const PageHead = (props) => { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | }; 13 | 14 | export default PageHead; 15 | -------------------------------------------------------------------------------- /components/codes/configuration/provider.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | // 1. import 'ChakraProvider' component 3 | import { ChakraProvider } from "@chakra-ui/react"; 4 | function App() { 5 | // 2. Use at the root of your app 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /components/layouts/docs/page-transition.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { motion } from "framer-motion"; 3 | 4 | const PageTransition = (props) => ( 5 | 10 | ); 11 | 12 | export default PageTransition; 13 | -------------------------------------------------------------------------------- /theme/styles.ts: -------------------------------------------------------------------------------- 1 | const styles = { 2 | global: { 3 | body: { 4 | fontFamily: "body", 5 | _dark: { 6 | bg: "#141517", 7 | color: "white", 8 | }, 9 | transition: "background .4s ease-in-out", 10 | }, 11 | html: { 12 | minH: "100%", 13 | }, 14 | }, 15 | }; 16 | 17 | export default styles; 18 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "prettier"], 3 | "plugins": ["prettier", "unused-imports"], 4 | "rules": { 5 | "react/no-unescaped-entities": "off", 6 | "react/display-name": "off", 7 | "no-unused-vars": "off", 8 | "prettier/prettier": ["error"], 9 | "unused-imports/no-unused-imports": "error" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /pages/preview/new.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | const Choc = () => { 5 | return ( 6 | 14 | ); 15 | }; 16 | 17 | export default Choc; 18 | -------------------------------------------------------------------------------- /theme/context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export type ThemeContextProps = { 4 | brand?: Record; 5 | setBrand?: (brand: Record) => void; 6 | presets?: (brand?: string) => any; 7 | }; 8 | 9 | export const ThemeContext = createContext({}); 10 | 11 | export const ThemeProvider = (props) => { 12 | return ; 13 | }; 14 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /components/utils/constants.ts: -------------------------------------------------------------------------------- 1 | export const CONSTANTS = { 2 | CHOC_TWITTER: "https://twitter.com/choc_ui", 3 | CHOC_DISCORD: "https://discord.gg/XcD8bNv7Ne", 4 | CHOC_GITHUB: "https://github.com/anubra266/choc-ui", 5 | 6 | SPONSOR_LINK: "https://patreon.com/anubra266", 7 | AUTHOR_GITHUB: "https://github.com/anubra266", 8 | AUTHOR_TWITTER: "https://twitter.com/anubra266", 9 | AUTHOR_LINKEDIN: "https://linkedin.com/in/anubra266", 10 | AUTHOR_EMAIL: "abraham@anubra266.com", 11 | }; 12 | -------------------------------------------------------------------------------- /patches/re-resizable+6.9.9.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/re-resizable/lib/index.d.ts b/node_modules/re-resizable/lib/index.d.ts 2 | index 6cd235f..39b5029 100644 3 | --- a/node_modules/re-resizable/lib/index.d.ts 4 | +++ b/node_modules/re-resizable/lib/index.d.ts 5 | @@ -56,6 +56,7 @@ export interface ResizableProps { 6 | style?: React.CSSProperties; 7 | className?: string; 8 | grid?: [number, number]; 9 | + id: string; 10 | snap?: { 11 | x?: number[]; 12 | y?: number[]; 13 | -------------------------------------------------------------------------------- /categories/forms.json: -------------------------------------------------------------------------------- 1 | { 2 | "forms": { 3 | "title": "forms", 4 | "prefix": "/docs/forms/", 5 | "sections": { 6 | "form-layouts": { 7 | "title": "Form Layouts", 8 | "route": "form-layouts", 9 | "image": "formlayouts.png", 10 | "components": [ 11 | { 12 | "name": "Two-column cards with separate submit actions", 13 | "url": "#", 14 | "preview": "forms/tccst" 15 | } 16 | ] 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /components/utils/route-categories/forms.json: -------------------------------------------------------------------------------- 1 | { 2 | "forms": { 3 | "title": "forms", 4 | "prefix": "/docs/forms/", 5 | "sections": { 6 | "form-layouts": { 7 | "title": "Form Layouts", 8 | "route": "form-layouts", 9 | "image": "formlayouts.png", 10 | "components": [ 11 | { 12 | "name": "Two-column cards with separate submit actions", 13 | "url": "#", 14 | "preview": "forms/tccst" 15 | } 16 | ] 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Choc UI", 3 | "short_name": "choc-ui", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png", 9 | "purpose": "any maskable" 10 | }, 11 | { 12 | "src": " /android-chrome-512x512.png", 13 | "sizes": "512x512", 14 | "type": "image/png" 15 | } 16 | ], 17 | "theme_color": "#666db3", 18 | "background_color": "#171c37", 19 | "start_url": "/", 20 | "display": "standalone", 21 | "orientation": "portrait" 22 | } 23 | -------------------------------------------------------------------------------- /components/codes/configuration/custom-theme.js: -------------------------------------------------------------------------------- 1 | // 1. Import the extendTheme function 2 | import { ChakraProvider, extendTheme } from "@chakra-ui/react"; 3 | // 2. Extend the theme to include custom colors, fonts, etc 4 | const colors = { 5 | brand: { 6 | 900: "#1a365d", 7 | 800: "#153e75", 8 | 700: "#2a69ac", 9 | }, 10 | }; 11 | const theme = extendTheme({ colors }); 12 | // 3. Pass the 'theme' prop to the 'ChakraProvider' 13 | function App() { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import type { AppProps } from "next/app"; 2 | import Theme from "theme"; 3 | import SiteSettings from "components/site-settings"; 4 | import PageHead from "components/head/static"; 5 | 6 | import splitbee from "@splitbee/web"; 7 | import ToTop from "components/to-top"; 8 | 9 | splitbee.init(); 10 | 11 | function MyApp({ Component, pageProps }: AppProps) { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default MyApp; 23 | -------------------------------------------------------------------------------- /components/doc-search/processSearchResult.ts: -------------------------------------------------------------------------------- 1 | export const processSearchResult = (searchResults) => { 2 | const processedResult = {}; 3 | const totalSections = Object.keys(searchResults).reduce((a, category) => { 4 | const sections = searchResults[category]; 5 | const categoryWithSectionIndex = sections.map((section, index) => ({ 6 | ...section, 7 | sectionIndex: a + index, 8 | })); 9 | processedResult[category] = categoryWithSectionIndex; 10 | 11 | return a + sections.length; 12 | }, 0); 13 | 14 | return { totalSections, processedResult }; 15 | }; 16 | -------------------------------------------------------------------------------- /pages/preview/packages/choc-paginator/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | import Pagination from "@choc-ui/paginator"; 4 | 5 | const Choc = () => { 6 | return ( 7 | 15 | 20 | 21 | ); 22 | }; 23 | export default Choc; 24 | -------------------------------------------------------------------------------- /components/splitbee.tsx: -------------------------------------------------------------------------------- 1 | import { Link, chakra, useColorModeValue } from "@chakra-ui/react"; 2 | 3 | export const Splitbee = () => { 4 | const splitbeeBadge = useColorModeValue("", "-dark"); 5 | return ( 6 | 7 | 8 | 12 | 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withPWA = require("next-pwa"); 2 | 3 | module.exports = { 4 | env: { 5 | siteUrl: "https://choc-ui.tech", 6 | githubRepo: "anubra266/choc-ui", 7 | githubChoc: "https://github.com/anubra266/choc-ui", 8 | githubUrl: "https://github.com/anubra266", 9 | twitterUrl: "https://twitter.com/anubra266", 10 | linkedinUrl: "https://linkedin.com/in/anubra266", 11 | emailAddress: "anubra266@gmail.com", 12 | discordUrl: "https://discord.gg/XcD8bNv7Ne", 13 | twitterChoc: "https://twitter.com/choc_ui", 14 | sponsorLink: "https://patreon.com/anubra266", 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /pages/docs/installation.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PageHead from "components/head"; 3 | import DocsLayout from "components/layouts/docs"; 4 | import { PageHeader } from "components/docs"; 5 | import Installation from "components/docs/installation/installation"; 6 | import { AdBox } from "analytics/ads"; 7 | 8 | const InstallationView = () => { 9 | return ( 10 | 11 | 12 | Installation 13 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default InstallationView; 20 | -------------------------------------------------------------------------------- /components/navbar/color-mode-toggle.tsx: -------------------------------------------------------------------------------- 1 | import { useColorMode, useColorModeValue } from "@chakra-ui/react"; 2 | import { FaMoon, FaSun } from "react-icons/fa"; 3 | import { ActionButton } from "components/navbar/action-button"; 4 | 5 | export const ColorModeToggle = () => { 6 | const { toggleColorMode: toggleMode } = useColorMode(); 7 | const text = useColorModeValue("dark", "light"); 8 | const SwitchIcon = useColorModeValue(FaMoon, FaSun); 9 | 10 | return ( 11 | } 15 | /> 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /pages/preview/packages/choc-paginator/cpz.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | import Pagination from "@choc-ui/paginator"; 4 | 5 | const Choc = () => { 6 | return ( 7 | 15 | 21 | 22 | ); 23 | }; 24 | export default Choc; 25 | -------------------------------------------------------------------------------- /pages/preview/packages/choc-paginator/more.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | import Pagination from "@choc-ui/paginator"; 4 | 5 | const Choc = () => { 6 | return ( 7 | 15 | 21 | 22 | ); 23 | }; 24 | export default Choc; 25 | -------------------------------------------------------------------------------- /analytics/ga-script.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const GA_TRACKING_ID = "G-YVRM2PTZFG"; 4 | 5 | const GAScript = () => ( 6 | <> 7 |