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 name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>Solid App</title>
|
||||
<title>Pulsar Web</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
5456
package-lock.json
generated
5456
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -20,6 +20,7 @@
|
|||
"vite-plugin-solid": "^2.11.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@solidjs/router": "^0.15.4",
|
||||
"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 MainView from "./views/MainView/MainView";
|
||||
import SettingsView from "./views/SettingsView/SettingsView";
|
||||
|
||||
const App: Component = () => {
|
||||
return <p></p>;
|
||||
return (
|
||||
<Router>
|
||||
<Route path="/" component={MainView} />
|
||||
<Route path="/settings" component={SettingsView} />
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
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";
|
||||
@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