moves config to shared directory
This commit is contained in:
Copple
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "supabase-website",
|
||||
"name": "www",
|
||||
"version": "0.0.2",
|
||||
"description": "Supabase main website",
|
||||
"private": true,
|
||||
@@ -21,7 +21,6 @@
|
||||
"@supabase/ui": "v0.37.0-alpha.50",
|
||||
"classnames": "^2.3.1",
|
||||
"date-fns": "2.10.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"globby": "^12.0.2",
|
||||
"gray-matter": "^4.0.2",
|
||||
"markdown-toc": "^1.2.0",
|
||||
|
||||
@@ -1,245 +1 @@
|
||||
const ui = require('./ui.config.js')
|
||||
const svgToDataUri = require('mini-svg-data-uri')
|
||||
|
||||
module.exports = ui({
|
||||
mode: 'JIT',
|
||||
content: [
|
||||
'./components/**/*.tsx',
|
||||
'./pages/**/*.tsx',
|
||||
'./_blog/*.mdx',
|
||||
// purge styles from supabase ui theme
|
||||
'./node_modules/@supabase/ui/dist/config/default-theme.js',
|
||||
],
|
||||
darkMode: 'class', // 'media' or 'class'
|
||||
// mode: 'jit',
|
||||
theme: {
|
||||
borderColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: theme('colors.scale.300', 'currentColor'),
|
||||
dark: theme('colors.scale.1200', 'currentColor'),
|
||||
}),
|
||||
divideColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: theme('colors.scale.300', 'currentColor'),
|
||||
dark: theme('colors.scale.600', 'currentColor'),
|
||||
}),
|
||||
extend: {
|
||||
typography: ({ theme }) => ({
|
||||
// Removal of backticks in code blocks for tailwind v3.0
|
||||
// https://github.com/tailwindlabs/tailwindcss-typography/issues/135
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'code::before': {
|
||||
content: '""',
|
||||
},
|
||||
'code::after': {
|
||||
content: '""',
|
||||
},
|
||||
'--tw-prose-body': theme('colors.scale[1100]'),
|
||||
'--tw-prose-headings': theme('colors.scale[1200]'),
|
||||
'--tw-prose-lead': theme('colors.scale[1100]'),
|
||||
'--tw-prose-links': theme('colors.brand[900]'),
|
||||
'--tw-prose-bold': theme('colors.scale[1100]'),
|
||||
'--tw-prose-counters': theme('colors.scale[1100]'),
|
||||
'--tw-prose-bullets': theme('colors.scale[900]'),
|
||||
'--tw-prose-hr': theme('colors.scale[500]'),
|
||||
'--tw-prose-quotes': theme('colors.scale[1100]'),
|
||||
'--tw-prose-quote-borders': theme('colors.scale[500]'),
|
||||
'--tw-prose-captions': theme('colors.scale[700]'),
|
||||
'--tw-prose-code': theme('colors.scale[1200]'),
|
||||
'--tw-prose-pre-code': theme('colors.scale[900]'),
|
||||
'--tw-prose-pre-bg': theme('colors.scale[400]'),
|
||||
'--tw-prose-th-borders': theme('colors.scale[500]'),
|
||||
'--tw-prose-td-borders': theme('colors.scale[200]'),
|
||||
'--tw-prose-invert-body': theme('colors.scale[200]'),
|
||||
'--tw-prose-invert-headings': theme('colors.white'),
|
||||
'--tw-prose-invert-lead': theme('colors.scale[500]'),
|
||||
'--tw-prose-invert-links': theme('colors.white'),
|
||||
'--tw-prose-invert-bold': theme('colors.white'),
|
||||
'--tw-prose-invert-counters': theme('colors.scale[400]'),
|
||||
'--tw-prose-invert-bullets': theme('colors.scale[600]'),
|
||||
'--tw-prose-invert-hr': theme('colors.scale[700]'),
|
||||
'--tw-prose-invert-quotes': theme('colors.scale[100]'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.scale[700]'),
|
||||
'--tw-prose-invert-captions': theme('colors.scale[400]'),
|
||||
// the following are typography overrides
|
||||
// examples can be seen here —> https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
|
||||
// reset all header font weights
|
||||
'h1, h2, h3, h4, h5': {
|
||||
fontWeight: '400',
|
||||
},
|
||||
h2: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
p: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
pre: {
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
marginBottom: '32px',
|
||||
},
|
||||
'p img': {
|
||||
border: '1px solid var(--colors-scale4)',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
toc: {
|
||||
css: {
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
'padding-left': 0,
|
||||
margin: 0,
|
||||
li: {
|
||||
'padding-left': 0,
|
||||
},
|
||||
a: {
|
||||
display: 'block',
|
||||
'text-decoration': 'none',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '200',
|
||||
color: theme('colors.scale[1100]'),
|
||||
'&:hover': {
|
||||
color: theme('colors.scale[1200]'),
|
||||
},
|
||||
'font-weight': '400',
|
||||
},
|
||||
// margin: 0,
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
li: {
|
||||
marginTop: '0.2rem',
|
||||
marginBottom: '0.2rem',
|
||||
'padding-left': '0 !important',
|
||||
'margin-left': '0.5rem',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '200',
|
||||
color: theme('colors.scale[1000]'),
|
||||
'&:hover': {
|
||||
color: theme('colors.scale[1200]'),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
// screens: {
|
||||
// sm: '640px',
|
||||
// // => @media (min-width: 640px) { ... }
|
||||
// md: '768px',
|
||||
// // => @media (min-width: 768px) { ... }
|
||||
// lg: '1024px',
|
||||
// // => @media (min-width: 1024px) { ... }
|
||||
// xl: '1280px',
|
||||
// // => @media (min-width: 1280px) { ... }
|
||||
// '2xl': '1536px',
|
||||
// // => @media (min-width: 1536px) { ... }
|
||||
// },
|
||||
// colors: {
|
||||
// 'gray-light': '#7B7F86',
|
||||
// 'gray-dark': '#7B7F86',
|
||||
// 'accent-1': '#FAFAFA',
|
||||
// 'accent-2': '#EAEAEA',
|
||||
// 'accent-7': '#333',
|
||||
// success: '#0070f3',
|
||||
// cyan: '#79FFE1',
|
||||
// // brand: {
|
||||
// // 100: '#82dab0',
|
||||
// // 200: '#69d3a0',
|
||||
// // 300: '#50cb90',
|
||||
// // 400: '#C5F1DD',
|
||||
// // 500: '#9FE7C7',
|
||||
// // 600: '#65D9A5',
|
||||
// // 700: '#3ECF8E',
|
||||
// // 800: '#38BC81',
|
||||
// // 900: '#10633E',
|
||||
// // },
|
||||
// // Joshen TODO: At the end just rearrange the values
|
||||
// dark: {
|
||||
// 100: '#eeeeee',
|
||||
// 200: '#e0e0e0',
|
||||
// 300: '#bbbbbb',
|
||||
// 400: '#666666',
|
||||
// 500: '#444444',
|
||||
// 600: '#2a2a2a',
|
||||
// 700: '#1f1f1f',
|
||||
// 800: '#181818',
|
||||
// 900: '#0f0f0f',
|
||||
// },
|
||||
// // gray: {
|
||||
// // 100: '#eeeeee',
|
||||
// // 200: '#e0e0e0',
|
||||
// // 300: '#bbbbbb',
|
||||
// // 400: '#666666',
|
||||
// // 500: '#444444',
|
||||
// // 600: '#2a2a2a',
|
||||
// // 700: '#1f1f1f',
|
||||
// // 800: '#181818',
|
||||
// // 900: '#0f0f0f',
|
||||
// // },
|
||||
// },
|
||||
// spacing: {
|
||||
// 28: '7rem',
|
||||
// },
|
||||
// letterSpacing: {
|
||||
// tighter: '-.04em',
|
||||
// },
|
||||
// lineHeight: {
|
||||
// tight: 1.2,
|
||||
// },
|
||||
// fontSize: {
|
||||
// '5xl': '2.5rem',
|
||||
// '6xl': '2.75rem',
|
||||
// '7xl': '4.5rem',
|
||||
// '8xl': '6.25rem',
|
||||
// },
|
||||
// boxShadow: {
|
||||
// 'light-small': '0px 4px 8px 2px rgba(107, 114, 128, 0.08)',
|
||||
// small: '0 5px 10px rgba(0, 0, 0, 0.12)',
|
||||
// medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
|
||||
// override: '0px 0px 0px rgba(0, 0, 0, 0)',
|
||||
// },
|
||||
fontFamily: {
|
||||
sans: ['custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
mono: ['Source Code Pro', 'Menlo', 'monospace'],
|
||||
},
|
||||
// stroke: (theme) => ({
|
||||
// white: theme('colors.white'),
|
||||
// black: theme('colors.black'),
|
||||
// }),
|
||||
backgroundImage: (theme) => ({
|
||||
squiggle: `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" width="6" height="3" fill="${theme(
|
||||
'colors.yellow.400'
|
||||
)}"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></svg>`
|
||||
)}")`,
|
||||
}),
|
||||
keyframes: {
|
||||
'flash-code': {
|
||||
'0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
|
||||
'100%': { backgroundColor: 'transparent' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'flash-code': 'flash-code 1s forwards',
|
||||
'flash-code-slow': 'flash-code 2s forwards',
|
||||
},
|
||||
},
|
||||
},
|
||||
// variants: {
|
||||
// extend: {
|
||||
// inset: ['group-hover'],
|
||||
// stroke: ['dark'],
|
||||
// height: ['hover'],
|
||||
// },
|
||||
// },
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
})
|
||||
module.exports = require('config/tailwind.config')
|
||||
|
||||
9541
package-lock.json
generated
9541
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -59,5 +59,8 @@
|
||||
"functions",
|
||||
"database",
|
||||
"auth"
|
||||
]
|
||||
],
|
||||
"dependencies": {
|
||||
"mini-svg-data-uri": "^1.4.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,8 +7,14 @@
|
||||
"eslint-preset.js"
|
||||
],
|
||||
"dependencies": {
|
||||
"@mertasan/tailwindcss-variables": "^2.2.3",
|
||||
"@radix-ui/colors": "^0.1.8",
|
||||
"@tailwindcss/forms": "^0.5.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"eslint-config-next": "^12.0.8",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-react": "7.28.0"
|
||||
"eslint-plugin-react": "7.28.0",
|
||||
"mini-svg-data-uri": "^1.4.4",
|
||||
"tailwindcss-radix": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,258 @@
|
||||
module.exports = {
|
||||
content: ['../../packages/ui/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
|
||||
// module.exports = {
|
||||
// content: [
|
||||
// "../../packages/ui/components/**/*.{ts,tsx}",
|
||||
// "./src/**/*.{ts,tsx}",
|
||||
// ],
|
||||
// theme: {
|
||||
// extend: {},
|
||||
// },
|
||||
// plugins: [],
|
||||
// }
|
||||
|
||||
const ui = require('./ui.config.js')
|
||||
const svgToDataUri = require('mini-svg-data-uri')
|
||||
|
||||
module.exports = ui({
|
||||
mode: 'JIT',
|
||||
content: [
|
||||
"../../packages/ui/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
'./components/**/*.tsx',
|
||||
'./pages/**/*.tsx',
|
||||
'./_blog/*.mdx',
|
||||
// purge styles from supabase ui theme
|
||||
'./node_modules/@supabase/ui/dist/config/default-theme.js',
|
||||
],
|
||||
darkMode: 'class', // 'media' or 'class'
|
||||
// mode: 'jit',
|
||||
theme: {
|
||||
extend: {},
|
||||
borderColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: theme('colors.scale.300', 'currentColor'),
|
||||
dark: theme('colors.scale.1200', 'currentColor'),
|
||||
}),
|
||||
divideColor: (theme) => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: theme('colors.scale.300', 'currentColor'),
|
||||
dark: theme('colors.scale.600', 'currentColor'),
|
||||
}),
|
||||
extend: {
|
||||
typography: ({ theme }) => ({
|
||||
// Removal of backticks in code blocks for tailwind v3.0
|
||||
// https://github.com/tailwindlabs/tailwindcss-typography/issues/135
|
||||
DEFAULT: {
|
||||
css: {
|
||||
'code::before': {
|
||||
content: '""',
|
||||
},
|
||||
'code::after': {
|
||||
content: '""',
|
||||
},
|
||||
'--tw-prose-body': theme('colors.scale[1100]'),
|
||||
'--tw-prose-headings': theme('colors.scale[1200]'),
|
||||
'--tw-prose-lead': theme('colors.scale[1100]'),
|
||||
'--tw-prose-links': theme('colors.brand[900]'),
|
||||
'--tw-prose-bold': theme('colors.scale[1100]'),
|
||||
'--tw-prose-counters': theme('colors.scale[1100]'),
|
||||
'--tw-prose-bullets': theme('colors.scale[900]'),
|
||||
'--tw-prose-hr': theme('colors.scale[500]'),
|
||||
'--tw-prose-quotes': theme('colors.scale[1100]'),
|
||||
'--tw-prose-quote-borders': theme('colors.scale[500]'),
|
||||
'--tw-prose-captions': theme('colors.scale[700]'),
|
||||
'--tw-prose-code': theme('colors.scale[1200]'),
|
||||
'--tw-prose-pre-code': theme('colors.scale[900]'),
|
||||
'--tw-prose-pre-bg': theme('colors.scale[400]'),
|
||||
'--tw-prose-th-borders': theme('colors.scale[500]'),
|
||||
'--tw-prose-td-borders': theme('colors.scale[200]'),
|
||||
'--tw-prose-invert-body': theme('colors.scale[200]'),
|
||||
'--tw-prose-invert-headings': theme('colors.white'),
|
||||
'--tw-prose-invert-lead': theme('colors.scale[500]'),
|
||||
'--tw-prose-invert-links': theme('colors.white'),
|
||||
'--tw-prose-invert-bold': theme('colors.white'),
|
||||
'--tw-prose-invert-counters': theme('colors.scale[400]'),
|
||||
'--tw-prose-invert-bullets': theme('colors.scale[600]'),
|
||||
'--tw-prose-invert-hr': theme('colors.scale[700]'),
|
||||
'--tw-prose-invert-quotes': theme('colors.scale[100]'),
|
||||
'--tw-prose-invert-quote-borders': theme('colors.scale[700]'),
|
||||
'--tw-prose-invert-captions': theme('colors.scale[400]'),
|
||||
// the following are typography overrides
|
||||
// examples can be seen here —> https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
|
||||
// reset all header font weights
|
||||
'h1, h2, h3, h4, h5': {
|
||||
fontWeight: '400',
|
||||
},
|
||||
h2: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
p: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '400',
|
||||
},
|
||||
pre: {
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
marginBottom: '32px',
|
||||
},
|
||||
'p img': {
|
||||
border: '1px solid var(--colors-scale4)',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
toc: {
|
||||
css: {
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
'padding-left': 0,
|
||||
margin: 0,
|
||||
li: {
|
||||
'padding-left': 0,
|
||||
},
|
||||
a: {
|
||||
display: 'block',
|
||||
'text-decoration': 'none',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '200',
|
||||
color: theme('colors.scale[1100]'),
|
||||
'&:hover': {
|
||||
color: theme('colors.scale[1200]'),
|
||||
},
|
||||
'font-weight': '400',
|
||||
},
|
||||
// margin: 0,
|
||||
ul: {
|
||||
'list-style-type': 'none',
|
||||
li: {
|
||||
marginTop: '0.2rem',
|
||||
marginBottom: '0.2rem',
|
||||
'padding-left': '0 !important',
|
||||
'margin-left': '0.5rem',
|
||||
},
|
||||
a: {
|
||||
fontWeight: '200',
|
||||
color: theme('colors.scale[1000]'),
|
||||
'&:hover': {
|
||||
color: theme('colors.scale[1200]'),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
// screens: {
|
||||
// sm: '640px',
|
||||
// // => @media (min-width: 640px) { ... }
|
||||
// md: '768px',
|
||||
// // => @media (min-width: 768px) { ... }
|
||||
// lg: '1024px',
|
||||
// // => @media (min-width: 1024px) { ... }
|
||||
// xl: '1280px',
|
||||
// // => @media (min-width: 1280px) { ... }
|
||||
// '2xl': '1536px',
|
||||
// // => @media (min-width: 1536px) { ... }
|
||||
// },
|
||||
// colors: {
|
||||
// 'gray-light': '#7B7F86',
|
||||
// 'gray-dark': '#7B7F86',
|
||||
// 'accent-1': '#FAFAFA',
|
||||
// 'accent-2': '#EAEAEA',
|
||||
// 'accent-7': '#333',
|
||||
// success: '#0070f3',
|
||||
// cyan: '#79FFE1',
|
||||
// // brand: {
|
||||
// // 100: '#82dab0',
|
||||
// // 200: '#69d3a0',
|
||||
// // 300: '#50cb90',
|
||||
// // 400: '#C5F1DD',
|
||||
// // 500: '#9FE7C7',
|
||||
// // 600: '#65D9A5',
|
||||
// // 700: '#3ECF8E',
|
||||
// // 800: '#38BC81',
|
||||
// // 900: '#10633E',
|
||||
// // },
|
||||
// // Joshen TODO: At the end just rearrange the values
|
||||
// dark: {
|
||||
// 100: '#eeeeee',
|
||||
// 200: '#e0e0e0',
|
||||
// 300: '#bbbbbb',
|
||||
// 400: '#666666',
|
||||
// 500: '#444444',
|
||||
// 600: '#2a2a2a',
|
||||
// 700: '#1f1f1f',
|
||||
// 800: '#181818',
|
||||
// 900: '#0f0f0f',
|
||||
// },
|
||||
// // gray: {
|
||||
// // 100: '#eeeeee',
|
||||
// // 200: '#e0e0e0',
|
||||
// // 300: '#bbbbbb',
|
||||
// // 400: '#666666',
|
||||
// // 500: '#444444',
|
||||
// // 600: '#2a2a2a',
|
||||
// // 700: '#1f1f1f',
|
||||
// // 800: '#181818',
|
||||
// // 900: '#0f0f0f',
|
||||
// // },
|
||||
// },
|
||||
// spacing: {
|
||||
// 28: '7rem',
|
||||
// },
|
||||
// letterSpacing: {
|
||||
// tighter: '-.04em',
|
||||
// },
|
||||
// lineHeight: {
|
||||
// tight: 1.2,
|
||||
// },
|
||||
// fontSize: {
|
||||
// '5xl': '2.5rem',
|
||||
// '6xl': '2.75rem',
|
||||
// '7xl': '4.5rem',
|
||||
// '8xl': '6.25rem',
|
||||
// },
|
||||
// boxShadow: {
|
||||
// 'light-small': '0px 4px 8px 2px rgba(107, 114, 128, 0.08)',
|
||||
// small: '0 5px 10px rgba(0, 0, 0, 0.12)',
|
||||
// medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
|
||||
// override: '0px 0px 0px rgba(0, 0, 0, 0)',
|
||||
// },
|
||||
fontFamily: {
|
||||
sans: ['custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
|
||||
mono: ['Source Code Pro', 'Menlo', 'monospace'],
|
||||
},
|
||||
// stroke: (theme) => ({
|
||||
// white: theme('colors.white'),
|
||||
// black: theme('colors.black'),
|
||||
// }),
|
||||
backgroundImage: (theme) => ({
|
||||
squiggle: `url("${svgToDataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" width="6" height="3" fill="${theme(
|
||||
'colors.yellow.400'
|
||||
)}"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></svg>`
|
||||
)}")`,
|
||||
}),
|
||||
keyframes: {
|
||||
'flash-code': {
|
||||
'0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
|
||||
'100%': { backgroundColor: 'transparent' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'flash-code': 'flash-code 1s forwards',
|
||||
'flash-code-slow': 'flash-code 2s forwards',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
// variants: {
|
||||
// extend: {
|
||||
// inset: ['group-hover'],
|
||||
// stroke: ['dark'],
|
||||
// height: ['hover'],
|
||||
// },
|
||||
// },
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
})
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
|
||||
import { Fragment, useState } from 'react'
|
||||
import { Dialog, Menu, Transition } from '@headlessui/react'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '#', icon: null, current: true },
|
||||
{ name: 'Team', href: '#', icon: null, current: false },
|
||||
{ name: 'Projects', href: '#', icon: null, current: false },
|
||||
{ name: 'Calendar', href: '#', icon: null, current: false },
|
||||
{ name: 'Documents', href: '#', icon: null, current: false },
|
||||
{ name: 'Reports', href: '#', icon: null, current: false },
|
||||
]
|
||||
const userNavigation = [
|
||||
{ name: 'Your Profile', href: '#' },
|
||||
{ name: 'Settings', href: '#' },
|
||||
{ name: 'Sign out', href: '#' },
|
||||
]
|
||||
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(' ')
|
||||
}
|
||||
|
||||
export default function SidebarLayout({children}: {children: React.ReactNode}) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Transition.Root show={sidebarOpen} as={Fragment}>
|
||||
<Dialog as="div" className="fixed inset-0 flex z-40 md:hidden" onClose={setSidebarOpen}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enterFrom="-translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="-translate-x-full"
|
||||
>
|
||||
<div className="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-indigo-700">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-in-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<span className="sr-only">Close sidebar</span>
|
||||
{/* <XIcon className="h-6 w-6 text-white" aria-hidden="true" /> */}
|
||||
</button>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<div className="flex-shrink-0 flex items-center px-4">
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-logo-indigo-300-mark-white-text.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5 flex-1 h-0 overflow-y-auto">
|
||||
<nav className="px-2 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
item.current
|
||||
? 'bg-indigo-800 text-white'
|
||||
: 'text-indigo-100 hover:bg-indigo-600',
|
||||
'group flex items-center px-2 py-2 text-base font-medium rounded-md'
|
||||
)}
|
||||
>
|
||||
{/* <item.icon
|
||||
className="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"
|
||||
aria-hidden="true"
|
||||
/> */}
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<div className="flex-shrink-0 w-14" aria-hidden="true">
|
||||
{/* Dummy element to force sidebar to shrink to fit close icon */}
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
|
||||
{/* Static sidebar for desktop */}
|
||||
<div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
{/* Sidebar component, swap this element with another sidebar if you like */}
|
||||
<div className="flex flex-col flex-grow pt-5 bg-indigo-700 overflow-y-auto">
|
||||
<div className="flex items-center flex-shrink-0 px-4">
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-logo-indigo-300-mark-white-text.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5 flex-1 flex flex-col">
|
||||
<nav className="flex-1 px-2 pb-4 space-y-1">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
item.current
|
||||
? 'bg-indigo-800 text-white'
|
||||
: 'text-indigo-100 hover:bg-indigo-600',
|
||||
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:pl-64 flex flex-col flex-1">
|
||||
<div className="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
<span className="sr-only">Open sidebar</span>M
|
||||
</button>
|
||||
<div className="flex-1 px-4 flex justify-between">
|
||||
<div className="flex-1 flex">
|
||||
<form className="w-full flex md:ml-0" action="#" method="GET">
|
||||
<label htmlFor="search-field" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<div className="relative w-full text-gray-400 focus-within:text-gray-600">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
||||
Icon
|
||||
</div>
|
||||
<input
|
||||
id="search-field"
|
||||
className="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-0 focus:border-transparent sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="search"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="ml-4 flex items-center md:ml-6">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
<span className="sr-only">View notifications</span>
|
||||
{/* <BellIcon className="h-6 w-6" aria-hidden="true" /> */}
|
||||
</button>
|
||||
|
||||
{/* Profile dropdown */}
|
||||
<Menu as="div" className="ml-3 relative">
|
||||
<div>
|
||||
<Menu.Button className="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img
|
||||
className="h-8 w-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{userNavigation.map((item) => (
|
||||
<Menu.Item key={item.name}>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div className="py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
||||
<h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
|
||||
</div>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
||||
{/* Replace with your content */}
|
||||
{children}
|
||||
{/* /End replace */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"extends": "tsconfig/react-library.json",
|
||||
"extends": "tsconfig/nextjs.json",
|
||||
"include": ["."],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user