diff --git a/app/_components/gaming/card.jsx b/app/_components/gaming/card.jsx new file mode 100644 index 0000000..d7a4f12 --- /dev/null +++ b/app/_components/gaming/card.jsx @@ -0,0 +1,143 @@ +"use client"; +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import CircleIcon from "@mui/icons-material/Circle"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import Grid from "@mui/material/Unstable_Grid2"; +import Paper from "@mui/material/Paper"; +import Dot from "./dot"; +import Link from "next/link"; +import { + useTheme, + styled, + createTheme, + ThemeProvider, +} from "@mui/material/styles"; +import HoverVideoPlayer from "react-hover-video-player"; + +const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); +const mdTheme = createTheme(); +export default function Component(props) { + const [mode, setMode] = React.useState("light"); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + + return ( + + + + + + } + loadingOverlay={ +
+
+
+ } + /> + + + + + + + + + + {props.heading} + + + + + {props.channel} + + + + + + {props.view} + {props.date} + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/app/_components/gaming/cardgrid.jsx b/app/_components/gaming/cardgrid.jsx new file mode 100644 index 0000000..043017a --- /dev/null +++ b/app/_components/gaming/cardgrid.jsx @@ -0,0 +1,354 @@ +"use client"; +import * as React from "react"; +import Card from "./card"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import styles from "../../_styles/Courses.module.css"; +function refreshMessages() { + const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); + // Array.from(new Array(40)) + return messageExamples.map( + () => messageExamples[getRandomInt(messageExamples.length)] + ); +} +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +export default function Icourses() { + const [value, setValue] = React.useState(0); + const ref = React.useRef(null); + const [messages, setMessages] = React.useState(() => refreshMessages()); + + React.useEffect(() => { + setMessages(refreshMessages()); + }, [value, setMessages]); + + return ( + <> + {messages.map( + ({ img, l, video, heading, avatar, date, channel, view }) => ( + <> +
+ +
+ + ) + )} + + ); +} +const messageExamples = [ + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 8 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 day ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "6 day ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "9 day ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + },{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 3 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "6 month ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + }, + +]; + +{ + /*
+ +
*/ +} +// +// ); +// } + +// import * as React from "react"; +// import Card from "./card"; +// import styles from "../../styles/Courses.module.css"; +// import youtubeService from '../../services/youtube'; +// export async function getServerSideProps() { +// const playlistId = 'PLMElh5YpJilZCEzu6OhfbsLYPJYz5TACL'; // Replace with your actual YouTube playlist ID +// const response = await youtubeService.playlistItems.list({ +// part: 'snippet', +// maxResults: 50, // Set the number of videos you want to retrieve +// playlistId, +// }); + +// const playlistItems = response.data.items; + +// return { +// props: { playlistItems }, +// }; +// } + +// function PlaylistPage({ playlistItems }) { +// return ( +//
+//

YouTube Playlist

+// +//
+// ); +// } + +// export default PlaylistPage; + +{ + /*
+ +
*/ +} diff --git a/app/_components/gaming/dot.jsx b/app/_components/gaming/dot.jsx new file mode 100644 index 0000000..c473264 --- /dev/null +++ b/app/_components/gaming/dot.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; +import PersonAdd from '@mui/icons-material/PersonAdd'; +import Settings from '@mui/icons-material/Settings'; +import Logout from '@mui/icons-material/Logout'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import QueueOutlinedIcon from '@mui/icons-material/QueueOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import PlaylistAddOutlinedIcon from '@mui/icons-material/PlaylistAddOutlined'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import BlockOutlinedIcon from '@mui/icons-material/BlockOutlined'; +import RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined'; +import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +export default function AccountMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + + + + + + + + + Add to queue + + + + + + Save to Watch later + + + + + + Save to playlist + + + + + + Download + + + + + + Share + + + + + + + Not interested + + + + + + Don't recommend space + + + + + + Report + + + + ); +} \ No newline at end of file diff --git a/app/_components/learning/card.jsx b/app/_components/learning/card.jsx new file mode 100644 index 0000000..d7a4f12 --- /dev/null +++ b/app/_components/learning/card.jsx @@ -0,0 +1,143 @@ +"use client"; +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import CircleIcon from "@mui/icons-material/Circle"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import Grid from "@mui/material/Unstable_Grid2"; +import Paper from "@mui/material/Paper"; +import Dot from "./dot"; +import Link from "next/link"; +import { + useTheme, + styled, + createTheme, + ThemeProvider, +} from "@mui/material/styles"; +import HoverVideoPlayer from "react-hover-video-player"; + +const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); +const mdTheme = createTheme(); +export default function Component(props) { + const [mode, setMode] = React.useState("light"); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + + return ( + + + + + + } + loadingOverlay={ +
+
+
+ } + /> + + + + + + + + + + {props.heading} + + + + + {props.channel} + + + + + + {props.view} + {props.date} + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/app/_components/learning/cardgrid.jsx b/app/_components/learning/cardgrid.jsx new file mode 100644 index 0000000..043017a --- /dev/null +++ b/app/_components/learning/cardgrid.jsx @@ -0,0 +1,354 @@ +"use client"; +import * as React from "react"; +import Card from "./card"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import styles from "../../_styles/Courses.module.css"; +function refreshMessages() { + const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); + // Array.from(new Array(40)) + return messageExamples.map( + () => messageExamples[getRandomInt(messageExamples.length)] + ); +} +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +export default function Icourses() { + const [value, setValue] = React.useState(0); + const ref = React.useRef(null); + const [messages, setMessages] = React.useState(() => refreshMessages()); + + React.useEffect(() => { + setMessages(refreshMessages()); + }, [value, setMessages]); + + return ( + <> + {messages.map( + ({ img, l, video, heading, avatar, date, channel, view }) => ( + <> +
+ +
+ + ) + )} + + ); +} +const messageExamples = [ + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 8 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 day ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "6 day ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "9 day ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + },{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 3 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "6 month ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + }, + +]; + +{ + /*
+ +
*/ +} +// +// ); +// } + +// import * as React from "react"; +// import Card from "./card"; +// import styles from "../../styles/Courses.module.css"; +// import youtubeService from '../../services/youtube'; +// export async function getServerSideProps() { +// const playlistId = 'PLMElh5YpJilZCEzu6OhfbsLYPJYz5TACL'; // Replace with your actual YouTube playlist ID +// const response = await youtubeService.playlistItems.list({ +// part: 'snippet', +// maxResults: 50, // Set the number of videos you want to retrieve +// playlistId, +// }); + +// const playlistItems = response.data.items; + +// return { +// props: { playlistItems }, +// }; +// } + +// function PlaylistPage({ playlistItems }) { +// return ( +//
+//

YouTube Playlist

+// +//
+// ); +// } + +// export default PlaylistPage; + +{ + /*
+ +
*/ +} diff --git a/app/_components/learning/dot.jsx b/app/_components/learning/dot.jsx new file mode 100644 index 0000000..c473264 --- /dev/null +++ b/app/_components/learning/dot.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; +import PersonAdd from '@mui/icons-material/PersonAdd'; +import Settings from '@mui/icons-material/Settings'; +import Logout from '@mui/icons-material/Logout'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import QueueOutlinedIcon from '@mui/icons-material/QueueOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import PlaylistAddOutlinedIcon from '@mui/icons-material/PlaylistAddOutlined'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import BlockOutlinedIcon from '@mui/icons-material/BlockOutlined'; +import RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined'; +import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +export default function AccountMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + + + + + + + + + Add to queue + + + + + + Save to Watch later + + + + + + Save to playlist + + + + + + Download + + + + + + Share + + + + + + + Not interested + + + + + + Don't recommend space + + + + + + Report + + + + ); +} \ No newline at end of file diff --git a/app/_components/music/card.jsx b/app/_components/music/card.jsx new file mode 100644 index 0000000..d7a4f12 --- /dev/null +++ b/app/_components/music/card.jsx @@ -0,0 +1,143 @@ +"use client"; +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import CircleIcon from "@mui/icons-material/Circle"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import Grid from "@mui/material/Unstable_Grid2"; +import Paper from "@mui/material/Paper"; +import Dot from "./dot"; +import Link from "next/link"; +import { + useTheme, + styled, + createTheme, + ThemeProvider, +} from "@mui/material/styles"; +import HoverVideoPlayer from "react-hover-video-player"; + +const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); +const mdTheme = createTheme(); +export default function Component(props) { + const [mode, setMode] = React.useState("light"); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + + return ( + + + + + + } + loadingOverlay={ +
+
+
+ } + /> + + + + + + + + + + {props.heading} + + + + + {props.channel} + + + + + + {props.view} + {props.date} + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/app/_components/music/cardgrid.jsx b/app/_components/music/cardgrid.jsx new file mode 100644 index 0000000..043017a --- /dev/null +++ b/app/_components/music/cardgrid.jsx @@ -0,0 +1,354 @@ +"use client"; +import * as React from "react"; +import Card from "./card"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import styles from "../../_styles/Courses.module.css"; +function refreshMessages() { + const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); + // Array.from(new Array(40)) + return messageExamples.map( + () => messageExamples[getRandomInt(messageExamples.length)] + ); +} +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +export default function Icourses() { + const [value, setValue] = React.useState(0); + const ref = React.useRef(null); + const [messages, setMessages] = React.useState(() => refreshMessages()); + + React.useEffect(() => { + setMessages(refreshMessages()); + }, [value, setMessages]); + + return ( + <> + {messages.map( + ({ img, l, video, heading, avatar, date, channel, view }) => ( + <> +
+ +
+ + ) + )} + + ); +} +const messageExamples = [ + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 8 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 day ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "6 day ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "9 day ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + },{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 3 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "6 month ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + }, + +]; + +{ + /*
+ +
*/ +} +// +// ); +// } + +// import * as React from "react"; +// import Card from "./card"; +// import styles from "../../styles/Courses.module.css"; +// import youtubeService from '../../services/youtube'; +// export async function getServerSideProps() { +// const playlistId = 'PLMElh5YpJilZCEzu6OhfbsLYPJYz5TACL'; // Replace with your actual YouTube playlist ID +// const response = await youtubeService.playlistItems.list({ +// part: 'snippet', +// maxResults: 50, // Set the number of videos you want to retrieve +// playlistId, +// }); + +// const playlistItems = response.data.items; + +// return { +// props: { playlistItems }, +// }; +// } + +// function PlaylistPage({ playlistItems }) { +// return ( +//
+//

YouTube Playlist

+// +//
+// ); +// } + +// export default PlaylistPage; + +{ + /*
+ +
*/ +} diff --git a/app/_components/music/dot.jsx b/app/_components/music/dot.jsx new file mode 100644 index 0000000..c473264 --- /dev/null +++ b/app/_components/music/dot.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; +import PersonAdd from '@mui/icons-material/PersonAdd'; +import Settings from '@mui/icons-material/Settings'; +import Logout from '@mui/icons-material/Logout'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import QueueOutlinedIcon from '@mui/icons-material/QueueOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import PlaylistAddOutlinedIcon from '@mui/icons-material/PlaylistAddOutlined'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import BlockOutlinedIcon from '@mui/icons-material/BlockOutlined'; +import RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined'; +import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +export default function AccountMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + + + + + + + + + Add to queue + + + + + + Save to Watch later + + + + + + Save to playlist + + + + + + Download + + + + + + Share + + + + + + + Not interested + + + + + + Don't recommend space + + + + + + Report + + + + ); +} \ No newline at end of file diff --git a/app/_components/news/card.jsx b/app/_components/news/card.jsx new file mode 100644 index 0000000..d7a4f12 --- /dev/null +++ b/app/_components/news/card.jsx @@ -0,0 +1,143 @@ +"use client"; +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import CircleIcon from "@mui/icons-material/Circle"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import Grid from "@mui/material/Unstable_Grid2"; +import Paper from "@mui/material/Paper"; +import Dot from "./dot"; +import Link from "next/link"; +import { + useTheme, + styled, + createTheme, + ThemeProvider, +} from "@mui/material/styles"; +import HoverVideoPlayer from "react-hover-video-player"; + +const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); +const mdTheme = createTheme(); +export default function Component(props) { + const [mode, setMode] = React.useState("light"); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + + return ( + + + + + + } + loadingOverlay={ +
+
+
+ } + /> + + + + + + + + + + {props.heading} + + + + + {props.channel} + + + + + + {props.view} + {props.date} + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/app/_components/news/cardgrid.jsx b/app/_components/news/cardgrid.jsx new file mode 100644 index 0000000..043017a --- /dev/null +++ b/app/_components/news/cardgrid.jsx @@ -0,0 +1,354 @@ +"use client"; +import * as React from "react"; +import Card from "./card"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import styles from "../../_styles/Courses.module.css"; +function refreshMessages() { + const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); + // Array.from(new Array(40)) + return messageExamples.map( + () => messageExamples[getRandomInt(messageExamples.length)] + ); +} +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +export default function Icourses() { + const [value, setValue] = React.useState(0); + const ref = React.useRef(null); + const [messages, setMessages] = React.useState(() => refreshMessages()); + + React.useEffect(() => { + setMessages(refreshMessages()); + }, [value, setMessages]); + + return ( + <> + {messages.map( + ({ img, l, video, heading, avatar, date, channel, view }) => ( + <> +
+ +
+ + ) + )} + + ); +} +const messageExamples = [ + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 8 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 day ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "6 day ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "9 day ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + },{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 3 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "6 month ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + }, + +]; + +{ + /*
+ +
*/ +} +// +// ); +// } + +// import * as React from "react"; +// import Card from "./card"; +// import styles from "../../styles/Courses.module.css"; +// import youtubeService from '../../services/youtube'; +// export async function getServerSideProps() { +// const playlistId = 'PLMElh5YpJilZCEzu6OhfbsLYPJYz5TACL'; // Replace with your actual YouTube playlist ID +// const response = await youtubeService.playlistItems.list({ +// part: 'snippet', +// maxResults: 50, // Set the number of videos you want to retrieve +// playlistId, +// }); + +// const playlistItems = response.data.items; + +// return { +// props: { playlistItems }, +// }; +// } + +// function PlaylistPage({ playlistItems }) { +// return ( +//
+//

YouTube Playlist

+// +//
+// ); +// } + +// export default PlaylistPage; + +{ + /*
+ +
*/ +} diff --git a/app/_components/news/dot.jsx b/app/_components/news/dot.jsx new file mode 100644 index 0000000..c473264 --- /dev/null +++ b/app/_components/news/dot.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; +import PersonAdd from '@mui/icons-material/PersonAdd'; +import Settings from '@mui/icons-material/Settings'; +import Logout from '@mui/icons-material/Logout'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import QueueOutlinedIcon from '@mui/icons-material/QueueOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import PlaylistAddOutlinedIcon from '@mui/icons-material/PlaylistAddOutlined'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import BlockOutlinedIcon from '@mui/icons-material/BlockOutlined'; +import RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined'; +import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +export default function AccountMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + + + + + + + + + Add to queue + + + + + + Save to Watch later + + + + + + Save to playlist + + + + + + Download + + + + + + Share + + + + + + + Not interested + + + + + + Don't recommend space + + + + + + Report + + + + ); +} \ No newline at end of file diff --git a/app/_components/trending/card.jsx b/app/_components/trending/card.jsx new file mode 100644 index 0000000..d7a4f12 --- /dev/null +++ b/app/_components/trending/card.jsx @@ -0,0 +1,143 @@ +"use client"; +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import IconButton from "@mui/material/IconButton"; +import Typography from "@mui/material/Typography"; +import CircleIcon from "@mui/icons-material/Circle"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import Grid from "@mui/material/Unstable_Grid2"; +import Paper from "@mui/material/Paper"; +import Dot from "./dot"; +import Link from "next/link"; +import { + useTheme, + styled, + createTheme, + ThemeProvider, +} from "@mui/material/styles"; +import HoverVideoPlayer from "react-hover-video-player"; + +const darkTheme = createTheme({ + palette: { + mode: "dark", + }, +}); +const mdTheme = createTheme(); +export default function Component(props) { + const [mode, setMode] = React.useState("light"); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + + return ( + + + + + + } + loadingOverlay={ +
+
+
+ } + /> + + + + + + + + + + {props.heading} + + + + + {props.channel} + + + + + + {props.view} + {props.date} + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/app/_components/trending/cardgrid.jsx b/app/_components/trending/cardgrid.jsx new file mode 100644 index 0000000..043017a --- /dev/null +++ b/app/_components/trending/cardgrid.jsx @@ -0,0 +1,354 @@ +"use client"; +import * as React from "react"; +import Card from "./card"; +import { experimentalStyled as styled } from "@mui/material/styles"; +import Paper from "@mui/material/Paper"; +import styles from "../../_styles/Courses.module.css"; +function refreshMessages() { + const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); + // Array.from(new Array(40)) + return messageExamples.map( + () => messageExamples[getRandomInt(messageExamples.length)] + ); +} +const Item = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: "center", + color: theme.palette.text.secondary, +})); +export default function Icourses() { + const [value, setValue] = React.useState(0); + const ref = React.useRef(null); + const [messages, setMessages] = React.useState(() => refreshMessages()); + + React.useEffect(() => { + setMessages(refreshMessages()); + }, [value, setMessages]); + + return ( + <> + {messages.map( + ({ img, l, video, heading, avatar, date, channel, view }) => ( + <> +
+ +
+ + ) + )} + + ); +} +const messageExamples = [ + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 8 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 day ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "6 day ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "9 day ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + },{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd1.jpg", + video: "/video.mp4", + heading: "$20K vs $2,000,000 Hybrid Car!", + avatar: "/amkbhd.jpg", + date: " 3 days ago", + view: "2.8M views", + channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd2.jpg", + video: "/3.mp4", + heading: "Here's the Thing about the M3 Macbook Air...", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.5M views", +channel: "Marques Brownlee", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd3.jpg", + video: "/3.mp4", + heading: "Tesla Cybertruck Review: Already Iconic?", + avatar: "/amkbhd.jpg", + date: "1 month ago", + view: "3.3M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd4.jpg", + video: "/3.mp4", + heading: "Google Pixel 8/8 Pro Review: We'll Fix It In Post!", + avatar: "/amkbhd.jpg", + date: "6 month ago", + view: "4.2M views", +channel: "Marques Brownlee", + link: "/watch", +}, +{ + l: "Courses/Python-GUI-Tkinter", + img: "/mkbhd5.jpg", + video: "/3.mp4", + heading: "I Tried a Disney Secret Project!", + avatar: "/amkbhd.jpg", + date: "9 days ago", + view: "5.9M views", +channel: "Marques Brownlee", + link: "/watch", +}, + + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa1.jpg", + video: "/2.mp4", + heading: "We Are Going (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 2 min ago", + view: "17M views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa2.jpg", + video: "/2.mp4", + heading: "How We Are Going to the Moon - 4K", + avatar: "/nasa.jpg", + date: " 4 years ago", + view: "10M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa3.jpg", + video: "/2.mp4", + heading: "Welcome Back! Discovery Lands Safely at Kennedy", + avatar: "/nasa.jpg", + date: "14 years ago", + view: "4.4M views", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa4.jpg", + video: "/3.mp4", + heading: "NASA Artemis Lunar Terrain Vehicle (Official NASA Trailer)", + avatar: "/nasa.jpg", + date: " 1 month ago", + view: "17K views ", +channel: "NASA", + link: "/watch", + }, + { + l: "Courses/Python-GUI-Tkinter", + img: "/nasa5.jpg", + video: "/4.mp4", + heading: "NASA Astronauts Aboard Space Station Huddle Up for Super Bowl", + avatar: "/nasa.jpg", + date: " 2 months ago", + view: "14K views ", +channel: "NASA", + link: "/watch", + }, + +]; + +{ + /*
+ +
*/ +} +// +// ); +// } + +// import * as React from "react"; +// import Card from "./card"; +// import styles from "../../styles/Courses.module.css"; +// import youtubeService from '../../services/youtube'; +// export async function getServerSideProps() { +// const playlistId = 'PLMElh5YpJilZCEzu6OhfbsLYPJYz5TACL'; // Replace with your actual YouTube playlist ID +// const response = await youtubeService.playlistItems.list({ +// part: 'snippet', +// maxResults: 50, // Set the number of videos you want to retrieve +// playlistId, +// }); + +// const playlistItems = response.data.items; + +// return { +// props: { playlistItems }, +// }; +// } + +// function PlaylistPage({ playlistItems }) { +// return ( +//
+//

YouTube Playlist

+// +//
+// ); +// } + +// export default PlaylistPage; + +{ + /*
+ +
*/ +} diff --git a/app/_components/trending/dot.jsx b/app/_components/trending/dot.jsx new file mode 100644 index 0000000..c473264 --- /dev/null +++ b/app/_components/trending/dot.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Tooltip from '@mui/material/Tooltip'; +import PersonAdd from '@mui/icons-material/PersonAdd'; +import Settings from '@mui/icons-material/Settings'; +import Logout from '@mui/icons-material/Logout'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import QueueOutlinedIcon from '@mui/icons-material/QueueOutlined'; +import HistoryIcon from '@mui/icons-material/History'; +import PlaylistAddOutlinedIcon from '@mui/icons-material/PlaylistAddOutlined'; +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'; +import BlockOutlinedIcon from '@mui/icons-material/BlockOutlined'; +import RemoveCircleOutlineOutlinedIcon from '@mui/icons-material/RemoveCircleOutlineOutlined'; +import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +export default function AccountMenu() { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + + + + + + + + + + + + + + Add to queue + + + + + + Save to Watch later + + + + + + Save to playlist + + + + + + Download + + + + + + Share + + + + + + + Not interested + + + + + + Don't recommend space + + + + + + Report + + + + ); +} \ No newline at end of file diff --git a/app/gaming/page.js b/app/gaming/page.js index 3a0f772..401c35f 100644 --- a/app/gaming/page.js +++ b/app/gaming/page.js @@ -1,35 +1,17 @@ -import Copyright2 from "../_components/copyright2"; -import styles from "../_styles/Bookmarks.module.css"; -import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; -import Typography from '@mui/material/Typography'; +import Toolbar from "@mui/material/Toolbar"; +import Cardgrid from "../_components/gaming/cardgrid"; export const metadata = { - title: "Gaming - FossTube", + title: "FossTube", description: "Open & Decentralized", }; -function gaming() { +export default function C() { return ( <> -
-
-
- - {/* heart */} - - + + + + - {/*

*/} - - This Page is in Construction. - - {/*

*/} - - - - -
-
); -} - -export default gaming; \ No newline at end of file +} \ No newline at end of file diff --git a/app/learning/page.js b/app/learning/page.js index d45cc29..788ff9c 100644 --- a/app/learning/page.js +++ b/app/learning/page.js @@ -1,35 +1,17 @@ -import Copyright2 from "../_components/copyright2"; -import styles from "../_styles/Bookmarks.module.css"; -import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; -import Typography from '@mui/material/Typography'; +import Toolbar from "@mui/material/Toolbar"; +import Cardgrid from "../_components/learning/cardgrid"; export const metadata = { - title: "Learning - FossTube", + title: "FossTube", description: "Open & Decentralized", }; -function learning() { +export default function C() { return ( <> -
-
-
- - {/* heart */} - - + + + + - {/*

*/} - - This Page is in Construction. - - {/*

*/} - - - - -
-
); -} - -export default learning; \ No newline at end of file +} \ No newline at end of file diff --git a/app/music/page.js b/app/music/page.js index 4ae34bf..80e864e 100644 --- a/app/music/page.js +++ b/app/music/page.js @@ -1,35 +1,17 @@ -import Copyright2 from "../_components/copyright2"; -import styles from "../_styles/Bookmarks.module.css"; -import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; -import Typography from '@mui/material/Typography'; +import Toolbar from "@mui/material/Toolbar"; +import Cardgrid from "../_components/music/cardgrid"; export const metadata = { - title: "Music - FossTube", + title: "FossTube", description: "Open & Decentralized", }; -function music() { +export default function C() { return ( <> -
-
-
- - {/* heart */} - - + + + + - {/*

*/} - - This Page is in Construction. - - {/*

*/} - - - - -
-
); -} - -export default music; \ No newline at end of file +} \ No newline at end of file diff --git a/app/news/page.js b/app/news/page.js index f6b4b66..314986f 100644 --- a/app/news/page.js +++ b/app/news/page.js @@ -1,35 +1,17 @@ -import Copyright2 from "../_components/copyright2"; -import styles from "../_styles/Bookmarks.module.css"; -import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; -import Typography from '@mui/material/Typography'; +import Toolbar from "@mui/material/Toolbar"; +import Cardgrid from "../_components/news/cardgrid"; export const metadata = { - title: "News - FossTube", + title: "FossTube", description: "Open & Decentralized", }; -function news() { +export default function C() { return ( <> -
-
-
- - {/* heart */} - - + + + + - {/*

*/} - - This Page is in Construction. - - {/*

*/} - - - - -
-
); -} - -export default news; \ No newline at end of file +} \ No newline at end of file diff --git a/app/trending/page.jsx b/app/trending/page.jsx index 7827117..433646f 100644 --- a/app/trending/page.jsx +++ b/app/trending/page.jsx @@ -1,35 +1,18 @@ -import Copyright2 from "../_components/copyright2"; -import styles from "../_styles/Bookmarks.module.css"; -import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; -import Typography from '@mui/material/Typography'; +import Toolbar from "@mui/material/Toolbar"; +import Cardgrid from "../_components/trending/cardgrid"; export const metadata = { - title: "Trending - FossTube", + title: "FossTube", description: "Open & Decentralized", }; -function library() { +export default function C() { return ( <> -
-
-
- - {/* heart */} - - + + + + - {/*

*/} - - This Page is in Construction. - - {/*

*/} - - - - -
-
); } -export default library; \ No newline at end of file