diff --git a/package.json b/package.json
index 5117bbd64..681bfc3ae 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
+ "react-icons": "^4.4.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"redux": "4.2.0",
diff --git a/src/_nav.js b/src/_nav.js
index 8f3d730db..eb747665b 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -1,305 +1,298 @@
import React from 'react'
import CIcon from '@coreui/icons-react'
-import {
- cilBell,
- cilCalculator,
- cilChartPie,
- cilCursor,
- cilDescription,
- cilDrop,
- cilNotes,
- cilPencil,
- cilPuzzle,
- cilSpeedometer,
- cilStar,
-} from '@coreui/icons'
+import { cilHeart, cilCloudUpload } from '@coreui/icons'
+// import {MdCloudUpload} from 'react-icons/md'
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
const _nav = [
{
component: CNavItem,
- name: 'Dashboard',
- to: '/dashboard',
- icon: ,
+ name: 'Upload File',
+ to: '/upload',
+ icon: ,
badge: {
color: 'info',
text: 'NEW',
},
},
- {
- component: CNavTitle,
- name: 'Theme',
- },
- {
- component: CNavItem,
- name: 'Colors',
- to: '/theme/colors',
- icon: ,
- },
- {
- component: CNavItem,
- name: 'Typography',
- to: '/theme/typography',
- icon: ,
- },
- {
- component: CNavTitle,
- name: 'Components',
- },
- {
- component: CNavGroup,
- name: 'Base',
- to: '/base',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'Accordion',
- to: '/base/accordion',
- },
- {
- component: CNavItem,
- name: 'Breadcrumb',
- to: '/base/breadcrumbs',
- },
- {
- component: CNavItem,
- name: 'Cards',
- to: '/base/cards',
- },
- {
- component: CNavItem,
- name: 'Carousel',
- to: '/base/carousels',
- },
- {
- component: CNavItem,
- name: 'Collapse',
- to: '/base/collapses',
- },
- {
- component: CNavItem,
- name: 'List group',
- to: '/base/list-groups',
- },
- {
- component: CNavItem,
- name: 'Navs & Tabs',
- to: '/base/navs',
- },
- {
- component: CNavItem,
- name: 'Pagination',
- to: '/base/paginations',
- },
- {
- component: CNavItem,
- name: 'Placeholders',
- to: '/base/placeholders',
- },
- {
- component: CNavItem,
- name: 'Popovers',
- to: '/base/popovers',
- },
- {
- component: CNavItem,
- name: 'Progress',
- to: '/base/progress',
- },
- {
- component: CNavItem,
- name: 'Spinners',
- to: '/base/spinners',
- },
- {
- component: CNavItem,
- name: 'Tables',
- to: '/base/tables',
- },
- {
- component: CNavItem,
- name: 'Tooltips',
- to: '/base/tooltips',
- },
- ],
- },
- {
- component: CNavGroup,
- name: 'Buttons',
- to: '/buttons',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'Buttons',
- to: '/buttons/buttons',
- },
- {
- component: CNavItem,
- name: 'Buttons groups',
- to: '/buttons/button-groups',
- },
- {
- component: CNavItem,
- name: 'Dropdowns',
- to: '/buttons/dropdowns',
- },
- ],
- },
- {
- component: CNavGroup,
- name: 'Forms',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'Form Control',
- to: '/forms/form-control',
- },
- {
- component: CNavItem,
- name: 'Select',
- to: '/forms/select',
- },
- {
- component: CNavItem,
- name: 'Checks & Radios',
- to: '/forms/checks-radios',
- },
- {
- component: CNavItem,
- name: 'Range',
- to: '/forms/range',
- },
- {
- component: CNavItem,
- name: 'Input Group',
- to: '/forms/input-group',
- },
- {
- component: CNavItem,
- name: 'Floating Labels',
- to: '/forms/floating-labels',
- },
- {
- component: CNavItem,
- name: 'Layout',
- to: '/forms/layout',
- },
- {
- component: CNavItem,
- name: 'Validation',
- to: '/forms/validation',
- },
- ],
- },
+ // {
+ // component: CNavTitle,
+ // name: 'Theme',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Colors',
+ // to: '/theme/colors',
+ // icon: ,
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Typography',
+ // to: '/theme/typography',
+ // icon: ,
+ // },
+ // {
+ // component: CNavTitle,
+ // name: 'Components',
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Base',
+ // to: '/base',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'Accordion',
+ // to: '/base/accordion',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Breadcrumb',
+ // to: '/base/breadcrumbs',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Cards',
+ // to: '/base/cards',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Carousel',
+ // to: '/base/carousels',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Collapse',
+ // to: '/base/collapses',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'List group',
+ // to: '/base/list-groups',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Navs & Tabs',
+ // to: '/base/navs',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Pagination',
+ // to: '/base/paginations',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Placeholders',
+ // to: '/base/placeholders',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Popovers',
+ // to: '/base/popovers',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Progress',
+ // to: '/base/progress',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Spinners',
+ // to: '/base/spinners',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Tables',
+ // to: '/base/tables',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Tooltips',
+ // to: '/base/tooltips',
+ // },
+ // ],
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Buttons',
+ // to: '/buttons',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'Buttons',
+ // to: '/buttons/buttons',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Buttons groups',
+ // to: '/buttons/button-groups',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Dropdowns',
+ // to: '/buttons/dropdowns',
+ // },
+ // ],
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Forms',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'Form Control',
+ // to: '/forms/form-control',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Select',
+ // to: '/forms/select',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Checks & Radios',
+ // to: '/forms/checks-radios',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Range',
+ // to: '/forms/range',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Input Group',
+ // to: '/forms/input-group',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Floating Labels',
+ // to: '/forms/floating-labels',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Layout',
+ // to: '/forms/layout',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Validation',
+ // to: '/forms/validation',
+ // },
+ // ],
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Charts',
+ // to: '/charts',
+ // icon: ,
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Icons',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'CoreUI Free',
+ // to: '/icons/coreui-icons',
+ // badge: {
+ // color: 'success',
+ // text: 'NEW',
+ // },
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'CoreUI Flags',
+ // to: '/icons/flags',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'CoreUI Brands',
+ // to: '/icons/brands',
+ // },
+ // ],
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Notifications',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'Alerts',
+ // to: '/notifications/alerts',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Badges',
+ // to: '/notifications/badges',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Modal',
+ // to: '/notifications/modals',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Toasts',
+ // to: '/notifications/toasts',
+ // },
+ // ],
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Widgets',
+ // to: '/widgets',
+ // icon: ,
+ // badge: {
+ // color: 'info',
+ // text: 'NEW',
+ // },
+ // },
+ // {
+ // component: CNavTitle,
+ // name: 'Extras',
+ // },
+ // {
+ // component: CNavGroup,
+ // name: 'Pages',
+ // icon: ,
+ // items: [
+ // {
+ // component: CNavItem,
+ // name: 'Login',
+ // to: '/login',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Register',
+ // to: '/register',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Error 404',
+ // to: '/404',
+ // },
+ // {
+ // component: CNavItem,
+ // name: 'Error 500',
+ // to: '/500',
+ // },
+ // ],
+ // },
{
component: CNavItem,
- name: 'Charts',
- to: '/charts',
- icon: ,
- },
- {
- component: CNavGroup,
- name: 'Icons',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'CoreUI Free',
- to: '/icons/coreui-icons',
- badge: {
- color: 'success',
- text: 'NEW',
- },
- },
- {
- component: CNavItem,
- name: 'CoreUI Flags',
- to: '/icons/flags',
- },
- {
- component: CNavItem,
- name: 'CoreUI Brands',
- to: '/icons/brands',
- },
- ],
- },
- {
- component: CNavGroup,
- name: 'Notifications',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'Alerts',
- to: '/notifications/alerts',
- },
- {
- component: CNavItem,
- name: 'Badges',
- to: '/notifications/badges',
- },
- {
- component: CNavItem,
- name: 'Modal',
- to: '/notifications/modals',
- },
- {
- component: CNavItem,
- name: 'Toasts',
- to: '/notifications/toasts',
- },
- ],
- },
- {
- component: CNavItem,
- name: 'Widgets',
- to: '/widgets',
- icon: ,
+ name: 'About Us',
+ to: '/about',
+ icon: ,
badge: {
- color: 'info',
- text: 'NEW',
+ // color: 'danger',
+ text: '🎈',
},
},
- {
- component: CNavTitle,
- name: 'Extras',
- },
- {
- component: CNavGroup,
- name: 'Pages',
- icon: ,
- items: [
- {
- component: CNavItem,
- name: 'Login',
- to: '/login',
- },
- {
- component: CNavItem,
- name: 'Register',
- to: '/register',
- },
- {
- component: CNavItem,
- name: 'Error 404',
- to: '/404',
- },
- {
- component: CNavItem,
- name: 'Error 500',
- to: '/500',
- },
- ],
- },
- {
- component: CNavItem,
- name: 'Docs',
- href: 'https://coreui.io/react/docs/templates/installation/',
- icon: ,
- },
]
export default _nav
diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js
index 114a6a047..d3a73808a 100644
--- a/src/assets/brand/logo-negative.js
+++ b/src/assets/brand/logo-negative.js
@@ -1,33 +1,9 @@
export const logoNegative = [
'608 134',
`
-
coreui react pro logo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Youtube your podcast
+
+
-`,
+ `,
]
diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js
index 7a2d7e0b3..5485173ca 100644
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -1,32 +1,9 @@
export const logo = [
'608 134',
`
- coreui react pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Youtube your podcast
+
+
`,
]
diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js
index 3a57fbdd4..32978889c 100644
--- a/src/assets/brand/sygnet.js
+++ b/src/assets/brand/sygnet.js
@@ -1,12 +1,9 @@
export const sygnet = [
'160 160',
`
- coreui logo
-
-
-
-
-
+ Youtube your podcast logo
+
+
`,
]
diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js
index 75132f279..84fc32d07 100644
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -5,15 +5,15 @@ const AppFooter = () => {
return (
diff --git a/src/routes.js b/src/routes.js
index d168b1ca4..d7b1f9701 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,8 +1,11 @@
import React from 'react'
+const About = React.lazy(() => import('./views/about/About'))
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
+// const Upload = React.lazy(() => import('./views/notifications/modals/Modals'))
+const Upload = React.lazy(() => import('./views/upload-dialog/UploadDialog')) // /Users/zhouqiangw/Desktop/studio/coreui-react-admin/src/views/upload-dialog/index.js
// Base
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
@@ -52,7 +55,8 @@ const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
const routes = [
{ path: '/', exact: true, name: 'Home' },
- { path: '/dashboard', name: 'Dashboard', element: Dashboard },
+ { path: '/about', name: 'About', element: About },
+ { path: '/upload', name: 'Upload', element: Upload },
{ path: '/theme', name: 'Theme', element: Colors, exact: true },
{ path: '/theme/colors', name: 'Colors', element: Colors },
{ path: '/theme/typography', name: 'Typography', element: Typography },
diff --git a/src/views/about/About.js b/src/views/about/About.js
new file mode 100644
index 000000000..b7c440445
--- /dev/null
+++ b/src/views/about/About.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CContainer,
+ // CInputGroupText,
+ CRow,
+} from '@coreui/react'
+
+const About = () => {
+ return (
+
+
+
+
+
+
+
About Us
+
+ We are using AI to generate a Video for your podcast, let the world watch your
+ podcast!
+
+
+
+
+
+
+
+ )
+}
+
+export default About
diff --git a/src/views/upload-dialog/UploadDialog.js b/src/views/upload-dialog/UploadDialog.js
new file mode 100644
index 000000000..598b45951
--- /dev/null
+++ b/src/views/upload-dialog/UploadDialog.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import {
+ CButton,
+ CLink,
+ CModal,
+ CModalHeader,
+ CModalTitle,
+ CModalBody,
+ CPopover,
+ CTooltip,
+ CModalFooter,
+} from '@coreui/react'
+
+const UploadDialog = () => {
+ const [visible, setVisible] = useState(false)
+ return (
+ <>
+ setVisible(!visible)}>Launch demo modal
+ setVisible(false)}>
+
+ Upload Your Audio File.
+
+
+ Online
+
+ This could be
+
+ Google Drive
+ {' '}
+ and
+
+ Dropbox
+ {' '}
+ links.
+
+
+
+ Choose from computer
+ setVisible(false)}>
+ Close
+
+
+
+ >
+ )
+}
+
+export default UploadDialog