Base layout
This commit is contained in:
parent
874bd18f11
commit
f1e90c4dd2
34 changed files with 2966 additions and 2725 deletions
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<title>Solid App</title>
|
<title>Pulsar Web</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
18
package-lock.json
generated
18
package-lock.json
generated
|
|
@ -1,14 +1,15 @@
|
||||||
{
|
{
|
||||||
"name": "vite-template-solid",
|
"name": "pulsar-web",
|
||||||
"version": "0.0.0",
|
"version": "0.1.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "vite-template-solid",
|
"name": "pulsar-web",
|
||||||
"version": "0.0.0",
|
"version": "0.1.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@solidjs/router": "^0.15.4",
|
||||||
"solid-js": "^1.9.9"
|
"solid-js": "^1.9.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -1301,6 +1302,15 @@
|
||||||
"solid-js": "^1.6.12"
|
"solid-js": "^1.6.12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@solidjs/router": {
|
||||||
|
"version": "0.15.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.15.4.tgz",
|
||||||
|
"integrity": "sha512-WOpgg9a9T638cR+5FGbFi/IV4l2FpmBs1GpIMSPa0Ce9vyJN7Wts+X2PqMf9IYn0zUj2MlSJtm1gp7/HI/n5TQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"solid-js": "^1.8.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/node": {
|
"node_modules/@tailwindcss/node": {
|
||||||
"version": "4.1.18",
|
"version": "4.1.18",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@
|
||||||
"vite-plugin-solid": "^2.11.8"
|
"vite-plugin-solid": "^2.11.8"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@solidjs/router": "^0.15.4",
|
||||||
"solid-js": "^1.9.9"
|
"solid-js": "^1.9.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
10
src/App.tsx
10
src/App.tsx
|
|
@ -1,7 +1,15 @@
|
||||||
|
import { Route, Router } from "@solidjs/router";
|
||||||
import type { Component } from "solid-js";
|
import type { Component } from "solid-js";
|
||||||
|
import MainView from "./views/MainView/MainView";
|
||||||
|
import SettingsView from "./views/SettingsView/SettingsView";
|
||||||
|
|
||||||
const App: Component = () => {
|
const App: Component = () => {
|
||||||
return <p></p>;
|
return (
|
||||||
|
<Router>
|
||||||
|
<Route path="/" component={MainView} />
|
||||||
|
<Route path="/settings" component={SettingsView} />
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
||||||
7
src/components/Channel/Channel.tsx
Normal file
7
src/components/Channel/Channel.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const Channel: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Channel;
|
||||||
1
src/components/Channel/index.ts
Normal file
1
src/components/Channel/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./Channel";
|
||||||
7
src/components/ChannelBar/ChannelBar.tsx
Normal file
7
src/components/ChannelBar/ChannelBar.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const ChannelBar: Component = () => {
|
||||||
|
return <div class="bg-stone-800 h-16 shadow-bar z-10"></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChannelBar;
|
||||||
1
src/components/ChannelBar/index.ts
Normal file
1
src/components/ChannelBar/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./ChannelBar";
|
||||||
7
src/components/Community/Community.tsx
Normal file
7
src/components/Community/Community.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const Community: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Community;
|
||||||
1
src/components/Community/index.ts
Normal file
1
src/components/Community/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./Community";
|
||||||
7
src/components/Member/Member.tsx
Normal file
7
src/components/Member/Member.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const Member: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Member;
|
||||||
1
src/components/Member/index.ts
Normal file
1
src/components/Member/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./Member";
|
||||||
23
src/components/Message/Message.tsx
Normal file
23
src/components/Message/Message.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
import { IMessageProps } from "./types";
|
||||||
|
|
||||||
|
const Message: Component<IMessageProps> = (props: IMessageProps) => {
|
||||||
|
return (
|
||||||
|
<li class="list-row hover:bg-stone-700">
|
||||||
|
<div
|
||||||
|
class="avatar cursor-pointer"
|
||||||
|
onClick={() => props.onProfileClick(props.userId)}
|
||||||
|
>
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img src={props.profileImage} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>{props.username}</div>
|
||||||
|
<p class="list-col-wrap text-xs">{props.message}</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Message;
|
||||||
2
src/components/Message/index.ts
Normal file
2
src/components/Message/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./Message";
|
||||||
|
export * from "./types";
|
||||||
10
src/components/Message/types.ts
Normal file
10
src/components/Message/types.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
interface IMessageProps {
|
||||||
|
messageId: string;
|
||||||
|
message: string;
|
||||||
|
userId: string;
|
||||||
|
username: string;
|
||||||
|
profileImage: string;
|
||||||
|
onProfileClick: (userId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { type IMessageProps };
|
||||||
22
src/components/MessageBar/MessageBar.tsx
Normal file
22
src/components/MessageBar/MessageBar.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const MessageBar: Component = () => {
|
||||||
|
return (
|
||||||
|
<div class="bg-stone-800 h-16 shadow-bar z-10 p-2">
|
||||||
|
<div class="join w-full h-full">
|
||||||
|
<div class="w-full h-full">
|
||||||
|
<label class="input validator join-item w-full h-full">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Write a text message..."
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-neutral join-item h-full">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MessageBar;
|
||||||
1
src/components/MessageBar/index.ts
Normal file
1
src/components/MessageBar/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./MessageBar";
|
||||||
|
|
@ -1,2 +1,9 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@plugin "daisyui";
|
@plugin "daisyui";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--shadow-panel: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
@theme {
|
||||||
|
--shadow-bar: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
|
||||||
7
src/views/ChannelView/ChannelView.tsx
Normal file
7
src/views/ChannelView/ChannelView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const ChannelView: Component = () => {
|
||||||
|
return <div class="bg-stone-900 w-64 shadow-panel z-20"></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChannelView;
|
||||||
1
src/views/ChannelView/index.ts
Normal file
1
src/views/ChannelView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./ChannelView";
|
||||||
57
src/views/ChatView/ChatView.tsx
Normal file
57
src/views/ChatView/ChatView.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
import ChannelBar from "../../components/ChannelBar/ChannelBar";
|
||||||
|
import MessageBar from "../../components/MessageBar/MessageBar";
|
||||||
|
import Message from "../../components/Message/Message";
|
||||||
|
|
||||||
|
const ChatView: Component = () => {
|
||||||
|
const testMessages = [
|
||||||
|
{
|
||||||
|
messageId: "432432",
|
||||||
|
message: "Hello this is a test message",
|
||||||
|
userId: "12121",
|
||||||
|
username: "Aslan",
|
||||||
|
image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
messageId: "432433",
|
||||||
|
message: "Hi hi",
|
||||||
|
userId: "12122",
|
||||||
|
username: "TestUser",
|
||||||
|
image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
messageId: "432434",
|
||||||
|
message: "Nooooo",
|
||||||
|
userId: "12121",
|
||||||
|
username: "Aslan",
|
||||||
|
image: "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const onProfileClick = (userId: string) => {
|
||||||
|
console.log(userId);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="bg-stone-800 flex-1 z-0">
|
||||||
|
<div class="flex flex-col h-full">
|
||||||
|
<ChannelBar />
|
||||||
|
<ul class="flex-1 h-full list flex flex-col justify-end p-2">
|
||||||
|
{testMessages.map((msg) => (
|
||||||
|
<Message
|
||||||
|
messageId={msg.messageId}
|
||||||
|
message={msg.message}
|
||||||
|
userId={msg.userId}
|
||||||
|
username={msg.username}
|
||||||
|
profileImage={msg.image}
|
||||||
|
onProfileClick={onProfileClick}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<MessageBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatView;
|
||||||
1
src/views/ChatView/index.ts
Normal file
1
src/views/ChatView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./ChatView";
|
||||||
7
src/views/CommunityView/CommunityView.tsx
Normal file
7
src/views/CommunityView/CommunityView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const CommunityView: Component = () => {
|
||||||
|
return <div class="bg-stone-950 w-20 shadow-panel z-30"></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommunityView;
|
||||||
1
src/views/CommunityView/index.ts
Normal file
1
src/views/CommunityView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./CommunityView";
|
||||||
7
src/views/LoginView/LoginView.tsx
Normal file
7
src/views/LoginView/LoginView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const LoginView: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginView;
|
||||||
1
src/views/LoginView/index.ts
Normal file
1
src/views/LoginView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./LoginView";
|
||||||
18
src/views/MainView/MainView.tsx
Normal file
18
src/views/MainView/MainView.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
import CommunityView from "../CommunityView/CommunityView";
|
||||||
|
import ChannelView from "../ChannelView/ChannelView";
|
||||||
|
import ChatView from "../ChatView/ChatView";
|
||||||
|
import MemberView from "../MemberView/MemberView";
|
||||||
|
|
||||||
|
const MainView: Component = () => {
|
||||||
|
return (
|
||||||
|
<div class="flex flex-row h-screen">
|
||||||
|
<CommunityView />
|
||||||
|
<ChannelView />
|
||||||
|
<ChatView />
|
||||||
|
<MemberView />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainView;
|
||||||
1
src/views/MainView/index.ts
Normal file
1
src/views/MainView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./MainView";
|
||||||
7
src/views/MemberView/MemberView.tsx
Normal file
7
src/views/MemberView/MemberView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const MemberView: Component = () => {
|
||||||
|
return <div class="bg-stone-900 w-64 shadow-panel z-20"></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MemberView;
|
||||||
1
src/views/MemberView/index.ts
Normal file
1
src/views/MemberView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./MemberView";
|
||||||
7
src/views/RegisterView/RegisterView.tsx
Normal file
7
src/views/RegisterView/RegisterView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const RegisterView: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RegisterView;
|
||||||
1
src/views/RegisterView/index.ts
Normal file
1
src/views/RegisterView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./RegisterView";
|
||||||
7
src/views/SettingsView/SettingsView.tsx
Normal file
7
src/views/SettingsView/SettingsView.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
const SettingsView: Component = () => {
|
||||||
|
return <div></div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SettingsView;
|
||||||
1
src/views/SettingsView/index.ts
Normal file
1
src/views/SettingsView/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./SettingsView";
|
||||||
Loading…
Add table
Add a link
Reference in a new issue