Skip to content

Commit

Permalink
最新の状態に更新
Browse files Browse the repository at this point in the history
  • Loading branch information
rintaro29 committed Oct 5, 2023
1 parent 84b747c commit b5382e4
Show file tree
Hide file tree
Showing 9 changed files with 940 additions and 183 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"extends": "next/core-web-vitals"
"plugins": ["tailwindcss"],
"extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]
}
857 changes: 826 additions & 31 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 11 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,25 @@
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.11",
"@mui/material": "^5.14.11",
"next": "latest",
"react": "latest",
"react-dom": "latest",
"next": "latest"
"react-hook-form": "^7.47.0"
},
"devDependencies": {
"typescript": "latest",
"@types/react": "latest",
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"autoprefixer": "latest",
"eslint": "latest",
"eslint-config-next": "latest",
"eslint-plugin-tailwindcss": "^3.13.0",
"postcss": "latest",
"tailwindcss": "latest",
"eslint": "latest",
"eslint-config-next": "latest"
"typescript": "latest"
}
}
49 changes: 49 additions & 0 deletions src/components/Sidebar/USerData.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import Image from "next/image";
import React, { useState } from "react";
// interface onlineUserProps{
// online:0;
// offline:false
// }

const USerData = () => {
const [isVisible, setIsVisible] = useState(true);

if (!isVisible) {
return null;
}
return (
<div className="bg-orange-50 p-1 px-4 text-black">
<div className="mb-2 flex space-x-2 border-b-4 border-slate-600">
<div className="flex items-center justify-center">
<Image src="/images/rcc-favicon.png" alt="RCCのfaviconです" width={40} height={40} className="m-2" />

<div className="my-1">
<p className="text-lg">RCC太郎</p>
<p className="text-sm">オンライン</p>
</div>
</div>
<div>🖋</div>
<div className="cursor-pointer" onClick={() => setIsVisible(false)}>
×
</div>
</div>
<div className=" border-b-2 border-slate-800">
<div className="flex">
<div>役職</div>
<span className="mx-2">:</span>
<div className="">システム管理</div>
</div>
</div>

<div className=" mb-10 border-b-2 border-slate-800">
<div className="flex">
<div>所属日</div>
<span className="mx-2">:</span>
<div className="">2023年1月1日</div>
</div>
</div>
</div>
);
};

export default USerData;
21 changes: 16 additions & 5 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,27 @@
import Header from "@/components/Header";
import Online from "@/components/Online";
import Sidebar from "@/components/Sidebar/Sidebar";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useState } from "react";

export default function App({ Component, pageProps }: AppProps) {
const router = useRouter();
const isAuthPage = router.pathname.includes("/auth");

return (
<div className="flex h-full w-full flex-col ">
<div className="sticky top-0 z-10">
<Header />
</div>
<div className=" hide-scrollbar h-full overflow-y-auto ">
<div className="w-full">
{!isAuthPage && (
<div className="sticky top-0 ">
<Header />
</div>
)}

<div className="flex h-screen ">
{!isAuthPage && <Sidebar />}
<Component {...pageProps} />
{!isAuthPage && <Online />}
</div>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions src/pages/channels/[id].tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const ChannelPage = () => {
return <div>ChannelPage</div>;
};

export default ChannelPage;
122 changes: 9 additions & 113 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,118 +1,14 @@
import Image from 'next/image'
import { Inter } from 'next/font/google'
import Image from "next/image";
import { Inter } from "next/font/google";
import Chat from "@/components/Chat";
import Online from "@/components/Online";

const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] });

export default function Home() {
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">src/pages/index.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
)
<div className="flex w-full ">
<Chat />
</div>
);
}
27 changes: 9 additions & 18 deletions src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,17 @@
@tailwind components;
@tailwind utilities;

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
.overlay {
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
/* スクロールバーを非表示にするスタイル */
.hide-scrollbar::-webkit-scrollbar {
width: 0.5em;
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
.hide-scrollbar::-webkit-scrollbar-thumb {
background-color: transparent;
}
21 changes: 11 additions & 10 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import type { Config } from 'tailwindcss'
import type { Config } from "tailwindcss";

const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
colors: {
default: "#f7f3e9",
sidebar: "#76788A",
online: "#2d2d38",
chat: "#",
},
},
},
plugins: [],
}
export default config
};
export default config;

0 comments on commit b5382e4

Please sign in to comment.