From 0813c5c01cad9777b08e2081c9a0ad720c80a8b1 Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Sun, 24 Jul 2022 23:29:12 -0700 Subject: [PATCH 1/9] Intial code add "Upload File", "About" page. --- package.json | 1 + src/_nav.js | 573 +++++++++++++++--------------- src/assets/brand/logo-negative.js | 32 +- src/assets/brand/logo.js | 29 +- src/assets/brand/sygnet.js | 9 +- src/routes.js | 5 +- src/views/about/About.js | 32 ++ 7 files changed, 337 insertions(+), 344 deletions(-) create mode 100644 src/views/about/About.js 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..a1685f30a 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,305 +1,312 @@ import React from 'react' import CIcon from '@coreui/icons-react' import { - cilBell, - cilCalculator, - cilChartPie, - cilCursor, - cilDescription, - cilDrop, - cilNotes, - cilPencil, - cilPuzzle, - cilSpeedometer, - cilStar, + // cilBell, + // cilCalculator, + // cilChartPie, + // cilCursor, + // cilDescription, + // cilDrop, + cilHeart, + // cilNotes, + // cilPencil, + // cilPuzzle, + // cilSpeedometer, + // cilStar, + 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/routes.js b/src/routes.js index d168b1ca4..1d89f96bc 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,8 +1,10 @@ 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/dashboard/Dashboard')) // Base const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) @@ -52,7 +54,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 From cf952414d97e478f444b803932b69eb18204073a Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Fri, 29 Jul 2022 18:44:05 -0700 Subject: [PATCH 2/9] commit 1 - remove cilBell --- src/_nav.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index a1685f30a..14fabf241 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,9 +1,6 @@ import React from 'react' import CIcon from '@coreui/icons-react' import { - // cilBell, - // cilCalculator, - // cilChartPie, // cilCursor, // cilDescription, // cilDrop, From 5bc5051381273a25e87cb978ea8f9a3ba0e92fb8 Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Fri, 29 Jul 2022 18:46:37 -0700 Subject: [PATCH 3/9] commit 2 - remove cilCursor --- src/_nav.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index 14fabf241..411a0ba54 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,9 +1,6 @@ import React from 'react' import CIcon from '@coreui/icons-react' import { - // cilCursor, - // cilDescription, - // cilDrop, cilHeart, // cilNotes, // cilPencil, From 7949b94e9a37f2fb11501f4531e4fb8ae5982da7 Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Fri, 29 Jul 2022 18:47:37 -0700 Subject: [PATCH 4/9] commit 3 - remove cilNotes. --- src/_nav.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index 411a0ba54..1ab45eee7 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -2,11 +2,6 @@ import React from 'react' import CIcon from '@coreui/icons-react' import { cilHeart, - // cilNotes, - // cilPencil, - // cilPuzzle, - // cilSpeedometer, - // cilStar, cilCloudUpload, } from '@coreui/icons' // import {MdCloudUpload} from 'react-icons/md' From d690519d3d3cf27616b5aa144b32244aa7a2f63c Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Thu, 25 Aug 2022 00:22:13 -0700 Subject: [PATCH 5/9] Format and update the routes to Button.js --- src/_nav.js | 5 +---- src/routes.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index 1ab45eee7..eb747665b 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,9 +1,6 @@ import React from 'react' import CIcon from '@coreui/icons-react' -import { - cilHeart, - cilCloudUpload, -} from '@coreui/icons' +import { cilHeart, cilCloudUpload } from '@coreui/icons' // import {MdCloudUpload} from 'react-icons/md' import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react' diff --git a/src/routes.js b/src/routes.js index 1d89f96bc..64bd9a2ba 100644 --- a/src/routes.js +++ b/src/routes.js @@ -4,7 +4,7 @@ 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/dashboard/Dashboard')) +const Upload = React.lazy(() => import('./views/buttons/buttons/Buttons')) // Base const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) From 672bc389d6d3f583b1eac0362d87a91a7f12a921 Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Thu, 25 Aug 2022 01:07:30 -0700 Subject: [PATCH 6/9] Add UploadDialog. --- src/routes.js | 3 +- src/views/upload-dialog/UploadDialog.js | 56 +++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/views/upload-dialog/UploadDialog.js diff --git a/src/routes.js b/src/routes.js index 64bd9a2ba..d7b1f9701 100644 --- a/src/routes.js +++ b/src/routes.js @@ -4,7 +4,8 @@ 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/buttons/buttons/Buttons')) +// 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')) diff --git a/src/views/upload-dialog/UploadDialog.js b/src/views/upload-dialog/UploadDialog.js new file mode 100644 index 000000000..54a94933e --- /dev/null +++ b/src/views/upload-dialog/UploadDialog.js @@ -0,0 +1,56 @@ +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)}> + + Modal title + + +
Popover in a modal
+

+ This + + button + {' '} + triggers a popover on click. +

+
+
Tooltips in a modal
+

+ + This link + {' '} + and + + that link + {' '} + have tooltips on hover. +

+ + + setVisible(false)}> + Close + + Save changes + + + + ) +} + +export default UploadDialog From eb0e4fb14bc1c6ad50ea0494102247270f041a5a Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Sat, 1 Oct 2022 15:10:38 -0700 Subject: [PATCH 7/9] Rebrand the AppFooter. --- src/components/AppFooter.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 (
- - CoreUI + + Audio2Video - © 2022 creativeLabs. + © 2022 SeenLab.
From 54dfbee9dac5883a18d5435cb50c79060c0cd33f Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Sat, 1 Oct 2022 15:19:50 -0700 Subject: [PATCH 8/9] Modify UploadDialog content. --- src/views/upload-dialog/UploadDialog.js | 26 +++++++++---------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/views/upload-dialog/UploadDialog.js b/src/views/upload-dialog/UploadDialog.js index 54a94933e..9bef455b7 100644 --- a/src/views/upload-dialog/UploadDialog.js +++ b/src/views/upload-dialog/UploadDialog.js @@ -18,35 +18,27 @@ const UploadDialog = () => { setVisible(!visible)}>Launch demo modal setVisible(false)}> - Modal title + Upload Your Audio File. -
Popover in a modal
+
Online

- This - - button - {' '} - triggers a popover on click. -

-
-
Tooltips in a modal
-

- - This link + This could be + + Google Drive {' '} and - - that link + + Dropbox {' '} - have tooltips on hover. + links.

+ Choose from computer setVisible(false)}> Close - Save changes From c28e698a73b77217b9df951a4c1d498f893cda86 Mon Sep 17 00:00:00 2001 From: Joe Wang Date: Sun, 30 Oct 2022 00:24:16 -0700 Subject: [PATCH 9/9] Update dialog description. --- src/views/upload-dialog/UploadDialog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/upload-dialog/UploadDialog.js b/src/views/upload-dialog/UploadDialog.js index 9bef455b7..598b45951 100644 --- a/src/views/upload-dialog/UploadDialog.js +++ b/src/views/upload-dialog/UploadDialog.js @@ -23,11 +23,11 @@ const UploadDialog = () => {
Online

- This could be + This could be  Google Drive {' '} - and + and  Dropbox {' '}