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" ...@@ -10,4 +10,7 @@ IGDB_IMG_BASE_URL="https://images.igdb.com/igdb/image/upload"
# For Authentication # For Authentication
TWITCH_CLIENT_ID="imdb_client_id" TWITCH_CLIENT_ID="imdb_client_id"
TWITCH_CLIENT_SECRET="imdb_auth_id" TWITCH_CLIENT_SECRET="imdb_auth_id"
\ No newline at end of file
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* ...@@ -42,5 +42,4 @@ yarn-error.log*
next-env.d.ts next-env.d.ts
# prisma # prisma
/prisma/migrations/*
dev.db* dev.db*
\ No newline at end of file
README.md
+ 1
− 1
View file @ 7c07d289
# project_ss23 # project_ss23_gameunity
## Projektbeschreibung ## Projektbeschreibung
Unsere Idee ist es eine Social Media Plattform zu erstellen. Auf dieser Webseite soll es möglich 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() { export default function Login() {
return ( return <SignIn />;
<div>
<h1>Login WIP</h1>
</div>
)
} }
\ 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() { export default function Signup() {
return ( return <SignUp />;
<div>
<h1>Signup WIP</h1>
</div>
)
} }
\ 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 { getGame, getGames } from "@/lib/igdb";
import { IGame } from "@/types/types"; import { IGame } from "@/types/igdb-types";
import Image from "next/image"; import Image from "next/image";
// renders a single game detail page // renders a single game detail page
...@@ -14,13 +14,4 @@ export default async function GameDetail({ params }: { params: { gameid: string ...@@ -14,13 +14,4 @@ export default async function GameDetail({ params }: { params: { gameid: string
<p>{data[0].summary}</p> <p>{data[0].summary}</p>
</div> </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" "use client"
import Dashboard from "@/components/Dashboard";
import Sort from "@/components/Sort";
import { Grid, Hidden } from "@mui/material";
export default function DashboardLayout({ export default function DashboardLayout({
children, children,
}: { }: {
...@@ -11,21 +7,9 @@ export default function DashboardLayout({ ...@@ -11,21 +7,9 @@ export default function DashboardLayout({
}) { }) {
return ( return (
<section> <section>
<Grid container spacing={2}> <div>
<Grid item xs={2}> {children}
<Dashboard /> </div>
</Grid>
<Grid item xs={10} md={8}>
{children}
</Grid>
<Hidden mdDown>
<Grid item xs={2}>
<Sort />
</Grid>
</Hidden>
</Grid>
</section> </section>
); );
} }
\ No newline at end of file
app/(content)/(gaming)/games/page.tsx
+ 5
− 65
View file @ 7c07d289
"use client" import { InfiniteScrollGames } from "@/components/InfiniteScroll";
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";
// renders a list of games infinitely (presumably) // renders a list of games infinitely (presumably)
export default function GamesPage() { export default async 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;
},
}
);
return ( return (
<Stack spacing={2}> <div className="py-5">
<Search /> <InfiniteScrollGames />
<Card> </div>
<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>
) )
} }
\ 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 PostMessageForm from "@/components/PostMessageForm";
import { prisma } from "@/prisma/db"; import { prisma } from "@/prisma/db";
export default async function ThreadsPage() { export default async function HomePage() {
let messages = null let messages = null
try { try {
messages = await prisma.message.findMany() messages = await prisma.message.findMany()
...@@ -11,7 +11,8 @@ export default async function ThreadsPage() { ...@@ -11,7 +11,8 @@ export default async function ThreadsPage() {
return ( return (
<div> <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> <p>Needs a reload after posting!!</p>
{messages ? {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 ( return (
<div> <div>
<h1>Friends Page WIP</h1> <h1>Followers Page WIP</h1>
</div> </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 ( return (
<div> <div>
<h1>Blog WIP</h1> <h1>Help Page WIP</h1>
</div> </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 Providers from '@/components/react-query/provider'
import { createContext, useState } from "react" import { ThemeProvider } from '@/components/ui/theme-provider'
import { QueryClient, QueryClientProvider } from "react-query" import { ClerkProvider } from '@clerk/nextjs'
import Header from "../components/Header"
import { Theme } from "./theme" const inter = Inter({ subsets: ['latin'] })
// metadata for the website
export const metadata = { export const metadata = {
title: 'GameUnity', title: 'Create Next App',
description: 'Soon', 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({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const [queryClient] = useState(() => new QueryClient());
const [theme, colorMode] = Theme();
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<QueryClientProvider client={queryClient}> <head />
<ColorModeContext.Provider value={colorMode}> <body className={inter.className}>
<ThemeProvider theme={theme}> <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<CssBaseline /> <ClerkProvider>
<body> <Providers>
<Container maxWidth={false}> {children}
<Header /> </Providers>
{children} </ClerkProvider>
</Container> </ThemeProvider>
</body> </body>
</ThemeProvider>
</ColorModeContext.Provider>
</QueryClientProvider>
</html> </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() { export default function Home() {
return ( return (
<main> <>
<div> <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
<h1>Welcome to GameUnity!</h1> <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
<p>This will be our Home Page and is still WIP</p> <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
<Link href="/games">Games List Progress</Link> Welcome to GameUnity!
</div> </h1>
</main> <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 Image from "next/image";
import Link from "next/link"; import Link from "next/link";
// this is a single game helper-component, only for design purposes // 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 } }) { export default function Game({ id, name, cover }: { id: number, name: string, cover: { url: string } }) {
return ( return (
<Card sx={{ maxWidth: 264 }} variant="outlined" > <Card>
<Link href={`/games/${id}`}> <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> </Link>
<CardContent> <p className="truncate">{name}</p>
<Typography noWrap={true}>{name}</Typography>
</CardContent>
</Card> </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