Skip to content
Snippets Groups Projects
Commit 7c07d289 authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

remove mui and change to tailwindcss, npm build throws error though

parent 1e94febc
No related branches found
No related tags found
1 merge request!4Change mui to tailwindcss
Pipeline #34234 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 221 additions and 298 deletions
.env.example
+ 4
− 1
View file @ 7c07d289
......@@ -10,4 +10,7 @@ IGDB_IMG_BASE_URL="https://images.igdb.com/igdb/image/upload"
# For Authentication
TWITCH_CLIENT_ID="imdb_client_id"
TWITCH_CLIENT_SECRET="imdb_auth_id"
\ No newline at end of file
TWITCH_CLIENT_SECRET="imdb_auth_id"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="clerk_publishable_key"
CLERK_SECRET_KEY="clerk_secret_key"
\ No newline at end of file
.gitignore
+ 0
− 1
View file @ 7c07d289
......@@ -42,5 +42,4 @@ yarn-error.log*
next-env.d.ts
# prisma
/prisma/migrations/*
dev.db*
\ No newline at end of file
README.md
+ 1
− 1
View file @ 7c07d289
# project_ss23
# project_ss23_gameunity
## Projektbeschreibung
Unsere Idee ist es eine Social Media Plattform zu erstellen. Auf dieser Webseite soll es möglich
......
app/(auth)/login/page.tsx
+ 3
− 5
View file @ 7c07d289
import { SignIn } from "@clerk/nextjs";
export default function Login() {
return (
<div>
<h1>Login WIP</h1>
</div>
)
return <SignIn />;
}
\ No newline at end of file
app/(auth)/signup/page.tsx
+ 3
− 5
View file @ 7c07d289
import { SignUp } from "@clerk/nextjs";
export default function Signup() {
return (
<div>
<h1>Signup WIP</h1>
</div>
)
return <SignUp />;
}
\ No newline at end of file
app/(content)/(gaming)/games/[gameid]/page.tsx
+ 1
− 10
View file @ 7c07d289
import { getGame, getGames } from "@/lib/igdb";
import { IGame } from "@/types/types";
import { IGame } from "@/types/igdb-types";
import Image from "next/image";
// renders a single game detail page
......@@ -14,13 +14,4 @@ export default async function GameDetail({ params }: { params: { gameid: string
<p>{data[0].summary}</p>
</div>
)
}
// pre-renders static paths for all fetched games for faster page loads
export async function generateStaticParams() {
const games = await getGames()
return games.map((game) => ({
gameid: game.id.toString(),
}));
}
\ No newline at end of file
app/(content)/(gaming)/games/layout.tsx
+ 3
− 19
View file @ 7c07d289
"use client"
import Dashboard from "@/components/Dashboard";
import Sort from "@/components/Sort";
import { Grid, Hidden } from "@mui/material";
export default function DashboardLayout({
children,
}: {
......@@ -11,21 +7,9 @@ export default function DashboardLayout({
}) {
return (
<section>
<Grid container spacing={2}>
<Grid item xs={2}>
<Dashboard />
</Grid>
<Grid item xs={10} md={8}>
{children}
</Grid>
<Hidden mdDown>
<Grid item xs={2}>
<Sort />
</Grid>
</Hidden>
</Grid>
<div>
{children}
</div>
</section>
);
}
\ No newline at end of file
app/(content)/(gaming)/games/page.tsx
+ 5
− 65
View file @ 7c07d289
"use client"
import Game from "@/components/Game";
import Search from "@/components/Search";
import { getBaseURL } from "@/lib/utils";
import { IGame } from "@/types/types";
import { Card, CardContent, Grid, Stack } from "@mui/material";
import { Fragment } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { useInfiniteQuery } from "react-query";
import { InfiniteScrollGames } from "@/components/InfiniteScroll";
// renders a list of games infinitely (presumably)
export default function GamesPage() {
const {
data,
error,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
status,
} = useInfiniteQuery(
'infiniteGames',
async ({ pageParam = 1 }) =>
await fetch(
`${getBaseURL()}/api/games/?page=${pageParam}`,
{ cache: 'force-cache', }
).then((result) => result.json() as Promise<IGame[]>),
{
getNextPageParam: (lastPage, pages) => {
return lastPage.length > 0 ? pages.length + 1 : undefined;
},
}
);
export default async function GamesPage() {
return (
<Stack spacing={2}>
<Search />
<Card>
<CardContent>
{status === 'success' && (
<InfiniteScroll
dataLength={data?.pages.length * 20}
next={fetchNextPage}
hasMore={hasNextPage ? true : false}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Grid container spacing={2} justifyContent="center">
{data?.pages.map((page, i) => (
<Fragment key={i}>
{page.map((game: IGame) => (
<Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
<Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
</Grid>
))}
</Fragment>
))}
</Grid>
</InfiniteScroll>
)}
</CardContent>
</Card>
</Stack>
<div className="py-5">
<InfiniteScrollGames />
</div>
)
}
\ No newline at end of file
app/(content)/(thread)/threads/page.tsx → app/(content)/(home)/home/page.tsx
+ 3
− 2
View file @ 7c07d289
import PostMessageForm from "@/components/PostMessageForm";
import { prisma } from "@/prisma/db";
export default async function ThreadsPage() {
export default async function HomePage() {
let messages = null
try {
messages = await prisma.message.findMany()
......@@ -11,7 +11,8 @@ export default async function ThreadsPage() {
return (
<div>
<h1>Threads WIP</h1>
<h1>Home WIP</h1>
<p>This will be where all messages show up.</p>
<p>Needs a reload after posting!!</p>
{messages ?
......
app/(content)/(user)/friends/page.tsx → app/(content)/(user)/followers/page.tsx
+ 7
− 0
View file @ 7c07d289
export default function Friends() {
export default function Followers() {
return (
<div>
<h1>Friends Page WIP</h1>
<h1>Followers Page WIP</h1>
</div>
)
}
\ No newline at end of file
app/(content)/(blog)/blogs/page.tsx → app/(content)/(user)/help/page.tsx
+ 7
− 0
View file @ 7c07d289
export default function BlogsPage() {
export default function Help() {
return (
<div>
<h1>Blog WIP</h1>
<h1>Help Page WIP</h1>
</div>
)
}
\ No newline at end of file
app/(content)/layout.tsx 0 → 100644
+ 27
− 0
View file @ 7c07d289
import DashboardNav from "@/components/nav"
import { SiteFooter } from "@/components/site-footer"
import { dashboardConfig } from "@/lib/config/dashboard"
interface DashboardLayoutProps {
children?: React.ReactNode
}
export default async function ContentLayout({
children,
}: DashboardLayoutProps) {
return (
<div className="flex min-h-screen flex-col space-y-6">
<div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
<aside className="hidden w-[200px] flex-col md:flex">
<div className="sticky top-0">
<DashboardNav items={dashboardConfig.sidebarNav} />
</div>
</aside>
<main className="flex w-full flex-1 flex-col overflow-hidden">
{children}
</main>
</div>
<SiteFooter className="border-t" />
</div>
)
}
\ No newline at end of file
app/api/threads/route.ts → app/api/messages/route.ts
+ 0
− 0
View file @ 7c07d289
File moved
app/globals.css 0 → 100644
+ 81
− 0
View file @ 7c07d289
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}
\ No newline at end of file
app/layout.tsx
+ 20
− 38
View file @ 7c07d289
"use client"
import { Inter } from 'next/font/google'
import './globals.css'
import { Container, CssBaseline, ThemeProvider } from "@mui/material"
import { createContext, useState } from "react"
import { QueryClient, QueryClientProvider } from "react-query"
import Header from "../components/Header"
import { Theme } from "./theme"
import Providers from '@/components/react-query/provider'
import { ThemeProvider } from '@/components/ui/theme-provider'
import { ClerkProvider } from '@clerk/nextjs'
const inter = Inter({ subsets: ['latin'] })
// metadata for the website
export const metadata = {
title: 'GameUnity',
description: 'Soon',
title: 'Create Next App',
description: 'Generated by create next app',
}
// for dark mode global context
export const ColorModeContext = createContext({ toggleColorMode: () => { } });
// this is the root layout for all pages ({children})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [queryClient] = useState(() => new QueryClient());
const [theme, colorMode] = Theme();
return (
<html lang="en">
<QueryClientProvider client={queryClient}>
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<CssBaseline />
<body>
<Container maxWidth={false}>
<Header />
{children}
</Container>
</body>
</ThemeProvider>
</ColorModeContext.Provider>
</QueryClientProvider>
<html lang="en" suppressHydrationWarning>
<head />
<body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<ClerkProvider>
<Providers>
{children}
</Providers>
</ClerkProvider>
</ThemeProvider>
</body>
</html>
)
}
// custom super small breakpoint for responsive design
declare module '@mui/material/styles' {
interface BreakpointOverrides {
ss: true;
}
}
\ No newline at end of file
app/loading.tsx 0 → 100644
+ 18
− 0
View file @ 7c07d289
import { Skeleton } from "@/components/ui/skeleton"
export default function Loading() {
return (
<div className="grid w-full gap-10">
<div className="flex w-full items-center justify-between">
<Skeleton className="h-[38px] w-[90px]" />
<Skeleton className="h-[38px] w-[80px]" />
</div>
<div className="mx-auto w-[800px] space-y-6">
<Skeleton className="h-[50px] w-full" />
<Skeleton className="h-[20px] w-2/3" />
<Skeleton className="h-[20px] w-full" />
<Skeleton className="h-[20px] w-full" />
</div>
</div>
)
}
\ No newline at end of file
app/page.tsx
+ 32
− 10
View file @ 7c07d289
import Link from "next/link";
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from 'next/link'
// renders home page
export default function Home() {
return (
<main>
<div>
<h1>Welcome to GameUnity!</h1>
<p>This will be our Home Page and is still WIP</p>
<Link href="/games">Games List Progress</Link>
</div>
</main>
<>
<section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
<div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
<h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
Welcome to GameUnity!
</h1>
<p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
This will be our Home Page and is still WIP
</p>
<div className="space-x-4">
<Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
Log In
</Link>
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
Sign Up
</Link>
</div>
<div className="flex flex-col space-y-4">
<Link href="/games" className={cn(buttonVariants({ size: "lg" }))}>
Games List Progress
</Link>
<Link href="/home" className={cn(buttonVariants({ size: "lg" }))}>
Home List Progress
</Link>
</div>
</div>
</section>
</>
)
}
\ No newline at end of file
}
app/theme.tsx deleted 100644 → 0
+ 0
− 36
View file @ 1e94febc
import { Theme, createTheme } from "@mui/material";
import { useMemo, useState } from "react";
// this is the main theme for the website
export function Theme(): [Theme, { toggleColorMode: () => void }] {
const [mode, setMode] = useState<'light' | 'dark'>('dark');
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'));
},
}),
[],
);
return [useMemo(() =>
createTheme({
palette: {
mode: mode,
},
breakpoints: {
values: {
xs: 0,
ss: 300,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
},
}),
[mode],
),
colorMode];
}
\ No newline at end of file
components/Dashboard.tsx deleted 100644 → 0
+ 0
− 99
View file @ 1e94febc
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import ExploreIcon from '@mui/icons-material/Explore';
import GroupIcon from '@mui/icons-material/Group';
import HelpIcon from '@mui/icons-material/Help';
import NotificationsIcon from '@mui/icons-material/Notifications';
import PeopleIcon from '@mui/icons-material/People';
import SettingsIcon from '@mui/icons-material/Settings';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import { Box, Button, Hidden, Stack, Typography } from "@mui/material";
import Link from "next/link";
export default function Dashboard() {
const loggedIn = false;
const username = "coolguy123";
return (
<Box sx={{ position: 'sticky', top: 0 }}>
{loggedIn ?
<Stack spacing={2}>
<Link href={`/${username}`}>
<Button variant="text" size="large" startIcon={<AccountCircleIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
My Profile
</Hidden>
</Button>
</Link>
<Link href="/notifications">
<Button variant="text" size="large" startIcon={<NotificationsIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Notifications
</Hidden>
</Button>
</Link>
<Link href="/friends">
<Button variant="text" size="large" startIcon={<PeopleIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Friends
</Hidden>
</Button>
</Link>
<Link href="/games">
<Button variant="text" size="large" startIcon={<SportsEsportsIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Games
</Hidden>
</Button>
</Link>
<Link href="/communities">
<Button variant="text" size="large" startIcon={<GroupIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Communities
</Hidden>
</Button>
</Link>
<Link href="/blogs">
<Button variant="text" size="large" startIcon={<ExploreIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Explore
</Hidden>
</Button>
</Link>
<Box height={30} />
<Link href="/settings">
<Button variant="text" size="large" startIcon={<SettingsIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Settings
</Hidden>
</Button>
</Link>
<Link href="/blogs">
<Button variant="text" size="large" startIcon={<HelpIcon />} sx={{ borderRadius: "999px" }}>
<Hidden lgDown>
Help
</Hidden>
</Button>
</Link>
</Stack>
:
<Stack spacing={2} sx={{ justifyContent: "center", textAlign: "center" }}>
<Link href="/login">
<Button variant="contained" size="large" sx={{ borderRadius: "999px" }}>
Log In
</Button>
</Link>
<Link href="/signup">
<Button variant="outlined" size="large" sx={{ borderRadius: "999px" }}>
Sign Up
</Button>
</Link>
<Typography variant="subtitle1">
Unlock endless possibilities - register or log in to unleash the full potential of our website.
</Typography>
</Stack>
}
</Box>
)
}
\ No newline at end of file
components/Game.tsx
+ 6
− 6
View file @ 7c07d289
import { Card, CardContent, Typography } from "@mui/material";
import { Card } from "@/components/ui/card";
import Image from "next/image";
import Link from "next/link";
// this is a single game helper-component, only for design purposes
export default function Game({ id, name, cover }: { id: number, name: string, cover: { url: string } }) {
return (
<Card sx={{ maxWidth: 264 }} variant="outlined" >
<Card>
<Link href={`/games/${id}`}>
<Image src={cover.url} alt={name} width={264} height={374} priority={true} style={{ width: '100%', height: '100%' }} />
<div className="rounded-lg flex items-center justify-center overflow-hidden">
<Image src={cover.url} alt={name} width={264} height={374} priority={true} style={{ width: '100%', height: '100%' }} />
</div>
</Link>
<CardContent>
<Typography noWrap={true}>{name}</Typography>
</CardContent>
<p className="truncate">{name}</p>
</Card>
)
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment