Base layout

This commit is contained in:
Aslan 2025-12-30 22:38:02 +01:00
parent 874bd18f11
commit f1e90c4dd2
34 changed files with 2966 additions and 2725 deletions

View file

@ -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>

18
package-lock.json generated
View file

@ -1,14 +1,15 @@
{
"name": "vite-template-solid",
"version": "0.0.0",
"name": "pulsar-web",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "vite-template-solid",
"version": "0.0.0",
"name": "pulsar-web",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@solidjs/router": "^0.15.4",
"solid-js": "^1.9.9"
},
"devDependencies": {
@ -1301,6 +1302,15 @@
"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": {
"version": "4.1.18",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",

View file

@ -20,6 +20,7 @@
"vite-plugin-solid": "^2.11.8"
},
"dependencies": {
"@solidjs/router": "^0.15.4",
"solid-js": "^1.9.9"
}
}

View file

@ -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;

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const Channel: Component = () => {
return <div></div>;
};
export default Channel;

View file

@ -0,0 +1 @@
export * from "./Channel";

View 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;

View file

@ -0,0 +1 @@
export * from "./ChannelBar";

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const Community: Component = () => {
return <div></div>;
};
export default Community;

View file

@ -0,0 +1 @@
export * from "./Community";

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const Member: Component = () => {
return <div></div>;
};
export default Member;

View file

@ -0,0 +1 @@
export * from "./Member";

View 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;

View file

@ -0,0 +1,2 @@
export * from "./Message";
export * from "./types";

View file

@ -0,0 +1,10 @@
interface IMessageProps {
messageId: string;
message: string;
userId: string;
username: string;
profileImage: string;
onProfileClick: (userId: string) => void;
}
export { type IMessageProps };

View 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;

View file

@ -0,0 +1 @@
export * from "./MessageBar";

View file

@ -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);
}

View 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;

View file

@ -0,0 +1 @@
export * from "./ChannelView";

View 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;

View file

@ -0,0 +1 @@
export * from "./ChatView";

View 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;

View file

@ -0,0 +1 @@
export * from "./CommunityView";

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const LoginView: Component = () => {
return <div></div>;
};
export default LoginView;

View file

@ -0,0 +1 @@
export * from "./LoginView";

View 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;

View file

@ -0,0 +1 @@
export * from "./MainView";

View 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;

View file

@ -0,0 +1 @@
export * from "./MemberView";

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const RegisterView: Component = () => {
return <div></div>;
};
export default RegisterView;

View file

@ -0,0 +1 @@
export * from "./RegisterView";

View file

@ -0,0 +1,7 @@
import type { Component } from "solid-js";
const SettingsView: Component = () => {
return <div></div>;
};
export default SettingsView;

View file

@ -0,0 +1 @@
export * from "./SettingsView";