feat(home page): add some stuff

src/components/Application/MembersSection.tsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import styles from '../../styles/Application/index.module.scss';
 import LeaveSVG from '../../assets/leave.svg';
 
-function Wrap({
+export function Wrap({
   image,
   title,
   color,
@@ -13,7 +13,7 @@ function Wrap({
 }) {
   return (
     <div className={styles.wrap}>
-      {image ? <img src={image} alt="" /> : ''}
+      {image ? <img src={image} alt="" /> : ``}
       <div className={styles.title} style={{ color }}>
         {title}
       </div>
@@ -29,9 +29,9 @@ export function MembersSection() {
         <div className={styles.divider} />
       </div>
       <div className={styles.members}>
-        <Wrap image={'https://i.pravatar.cc/300'} title="Ahmed Ali" />
-        <Wrap image={'https://i.pravatar.cc/500'} title="Ali Yosif" />
-        <Wrap image={'https://i.pravatar.cc/400'} title="Mariam Mohammed" />
+        <Wrap image={`https://i.pravatar.cc/300`} title="Ahmed Ali" />
+        <Wrap image={`https://i.pravatar.cc/500`} title="Ali Yosif" />
+        <Wrap image={`https://i.pravatar.cc/400`} title="Mariam Mohammed" />
       </div>
 
       <div className={styles.tail}>
@@ -40,7 +40,7 @@ export function MembersSection() {
           image={LeaveSVG as unknown as string}
           color="red"
           title="Leave Party!"
-        />	
+        />
       </div>
     </div>
   );

src/containers/Router.tsx

@@ -1,12 +1,13 @@
 import { h } from 'preact';
 import { Outlet, Router, ReactLocation, Route } from '@tanstack/react-location';
-import { Application, Login } from './pages';
+import { Application, Home, Login } from './pages';
 import '../styles/index.scss';
 
 const routes: Route[] = [
   {
     children: [
       { path: `login`, element: <Login /> },
+      { path: `/`, element: <Home /> },
       { path: `app`, element: <Application /> },
     ],
   },

src/containers/pages/Home.tsx

@@ -0,0 +1,56 @@
+import { h } from 'preact';
+import styles from '../../styles/home.module.scss';
+import { Wrap } from '../../components/Application';
+export function Home() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.sidebar}>
+        <div class={styles.head}>
+          <Wrap title="My name" />
+          <div class={styles.divider} />
+        </div>
+        <div class={styles.options}>
+          <Wrap image={` `} title="My name" />
+          <Wrap image={` `} title="My name" />
+          <Wrap image={` `} title="My name" />
+          <Wrap image={` `} title="My name" />
+        </div>
+        <div class={styles.tail}>
+          <div className={styles.divider} />
+          <Wrap image={` `} title="My name" />
+        </div>
+      </div>
+      <div className={styles.home}>
+        <div class={styles.head}>
+          <div class={styles.title}>
+            <div class={styles.name}>Your library</div>
+            <div class={styles.divider} />
+            <div class={styles.description}>here is some description</div>
+          </div>
+          <div class={styles.divider} />
+        </div>
+        <div className={styles.content}>
+          <Video />
+          <Video />
+          <Video /> <Video /> <Video /> <Video /> <Video /> <Video />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Video() {
+  return (
+    <div class={styles.video}>
+      <img
+        src="https://cdn.discordapp.com/attachments/1195575834426220604/1195636639083540581/image.png?ex=65b4b664&is=65a24164&hm=28341ca9d72876bc98df3798b3d3ab31e670718380246f4cce2e1dfa47db33f0&"
+        alt=""
+      />
+      <div class={styles.background}></div>
+      <div class={styles.text}>
+        <div class={styles.title}>Let’s learn react native in 100sec!!</div>
+        <div class={styles.views}>10K views</div>
+      </div>
+    </div>
+  );
+}

src/containers/pages/Login.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import styles from '../../styles/login.module.scss';
-import { Api } from '../../utils/client';
+// import { Api } from '../../utils/client';
 export function Login() {
   const api = new Api();
   return (
@@ -11,36 +11,36 @@ export function Login() {
             <div class={styles.depth}>START FOR FREE</div>
             <div className={styles.title_container}>
               <div class={styles.title}>
-                Create new account<span style={{ color: '#FF4646' }}>.</span>
+                Create new account<span style={{ color: `#FF4646` }}>.</span>
               </div>
               <div class={styles.paragraph}>
                 Already have an account?
                 <a href="/login" className={styles.login_span}>
-                  {' '}
+                  {` `}
                   log In
                 </a>
               </div>
             </div>
           </div>
           <form>
             <div>
-              <input type="text" placeholder={'First Name'} />
-              <input type="text" placeholder={'Last Name'} />
+              <input type="text" placeholder={`First Name`} />
+              <input type="text" placeholder={`Last Name`} />
             </div>
-            <input type="text" placeholder={'Username'} />
-            <input type="email" placeholder={'example@gmail.com'} />
-            <input type="password" placeholder={'******'} />
+            <input type="text" placeholder={`Username`} />
+            <input type="email" placeholder={`example@gmail.com`} />
+            <input type="password" placeholder={`******`} />
             <div>
               <button>Another Method</button>
               <button
                 onClick={async (e) => {
                   e.preventDefault();
                   await api.auth.register({
-                    username: '',
-                    email: '',
-                    first_name: '',
-                    last_name: '',
-                    password: '',
+                    username: ``,
+                    email: ``,
+                    first_name: ``,
+                    last_name: ``,
+                    password: ``,
                   });
                 }}
               >

src/containers/pages/index.ts

@@ -1,2 +1,3 @@
 export * from './Login';
 export * from './Application';
+export * from './Home';

src/styles/Application/index.module.scss

@@ -11,7 +11,7 @@
   img {
     background-color: #1c1c1c;
     width: 49px;
-    height: 49px;	
+    height: 49px;
     border-radius: 100%;
   }
   .title {
@@ -22,7 +22,7 @@
 }
 .chat_section {
   min-width: 322px;
-  background-color: #1C1C1C;
+  background-color: #1c1c1c;
 }
 .video_section {
   display: flex;
@@ -49,9 +49,9 @@
   }
   & > .members {
     height: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
   & > .tail {
     height: fit-content;

src/styles/Application/index.module.scss.d.ts

@@ -10,4 +10,15 @@ declare const classNames: {
   readonly members: 'members';
   readonly tail: 'tail';
 };
-export = classNames;
+export default classNames;
+export type ClassNames =
+  | 'container'
+  | 'wrap'
+  | 'title'
+  | 'chat_section'
+  | 'video_section'
+  | 'members_section'
+  | 'head'
+  | 'divider'
+  | 'members'
+  | 'tail';

src/styles/home.module.scss

@@ -0,0 +1,120 @@
+.container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+
+.chat_section {
+  min-width: 322px;
+  background-color: #1c1c1c;
+}
+.video_section {
+  display: flex;
+  width: 100%;
+  background-color: #161616;
+}
+.sidebar {
+  min-width: 305px;
+  padding-inline: 16px;
+  padding-block: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background-color: #111;
+  & > .head {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    & > .divider {
+      width: 101px;
+      height: 1px;
+      background: #595959;
+    }
+  }
+  & > .options {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  & > .tail {
+    height: fit-content;
+  }
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  & > .head {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    justify-content: center;
+    & > .title {
+      align-items: center;
+      display: flex;
+      gap: 20px;
+      & > .name {
+        color: #fff;
+        font-family: Oswald;
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+      }
+      & > .divider {
+        background: #717171;
+        width: 1px;
+        height: 10px;
+      }
+      & > .description {
+        color: #fff;
+
+        font-family: Oswald;
+        font-size: 16px;
+        font-style: normal;
+        line-height: normal;
+      }
+    }
+    & > .divider {
+      max-width: 656px;
+      background: rgba(255, 255, 255, 0.1);
+      height: 1px;
+    }
+  }
+  & > .content {
+    display: flex;
+    max-width: 2000px;
+    gap: 24px;
+    flex-wrap: wrap;
+    & > .video {
+      border-radius: 10px;
+      max-width: 336px;
+      max-height: 188px;
+      position: relative;
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+      & > .background {
+        background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
+        rotate: 180deg;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      & > .text {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+      }
+    }
+  }
+}

src/styles/home.module.scss.d.ts

@@ -0,0 +1,36 @@
+declare const classNames: {
+  readonly container: 'container';
+  readonly chat_section: 'chat_section';
+  readonly video_section: 'video_section';
+  readonly sidebar: 'sidebar';
+  readonly head: 'head';
+  readonly divider: 'divider';
+  readonly options: 'options';
+  readonly tail: 'tail';
+  readonly home: 'home';
+  readonly title: 'title';
+  readonly name: 'name';
+  readonly description: 'description';
+  readonly content: 'content';
+  readonly video: 'video';
+  readonly background: 'background';
+  readonly text: 'text';
+};
+export default classNames;
+export type ClassNames =
+  | 'container'
+  | 'chat_section'
+  | 'video_section'
+  | 'sidebar'
+  | 'head'
+  | 'divider'
+  | 'options'
+  | 'tail'
+  | 'home'
+  | 'title'
+  | 'name'
+  | 'description'
+  | 'content'
+  | 'video'
+  | 'background'
+  | 'text';

src/styles/index.scss

@@ -5,11 +5,14 @@
   margin: 0;
   padding: 0;
   font-family: Oswald, Helvetica, sans-serif;
+
 }
 
 body {
   color: $font-color-primary;
   background-color: $application-bg;
   font-family: Oswald, Helvetica, sans-serif;
   overflow: hidden;
+  box-sizing: border-box;
+
 }