add some ui kit

public/images/check.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.4109 8.58419L15.9928 0L18.82 2.8279L7.4109 14.24L0 6.82716L2.82716 3.99926L7.4109 8.58419Z" fill="#E1B488"/>
+</svg>

src/app/store.ts

@@ -1,6 +1,6 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
 
-import counterReducer from '../features/counter/counterSlice'
+let counterReducer = null
 
 export function makeStore() {
   return configureStore({

src/app/types.ts

@@ -0,0 +1,15 @@
+
+export enum EventTypes{
+    AIM,
+    COMMENT,
+    DREAM
+}
+
+export interface EventIE{
+    date: Date
+    name: string
+    description: string
+    isModerated?: boolean
+    type: EventTypes
+}
+

src/components/Button/btn.module.css

@@ -0,0 +1,38 @@
+.btn{
+    display: inline-block;
+    padding: 0px 24px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    font-weight: 300;
+    background: #1A1F24;
+    color:aliceblue;
+    outline: none;
+    border:none;
+    cursor: pointer;
+    border-radius: 100px;
+    letter-spacing: 0.1em;
+    white-space: nowrap;
+    box-shadow: -3px -3px 8px rgb(255 255 255 / 5%), 3px 3px 8px rgb(0 0 0 / 5%);
+}
+
+.bigBtn{
+    width: 316px;
+    height: 52px;
+    line-height: 52px;
+    background: #1A1B1F;
+    box-shadow: -4px -4px 4px #1e1f24, 4px 4px 8px #16171a;
+    border-radius: 14px;
+    font-size: 13px;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: #FFFFFF;
+    text-align: center;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+}
+
+.btn:hover, .bigBtn:hover{
+    background-color: #E6B98B;
+}

src/components/Button/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./btn.module.css"
+
+
+interface ButtonIE{
+    class?:string
+    isBig?:boolean
+    onClick: ()=>void
+    children: JSX.Element|string
+}
+
+
+export const Button: React.FC<ButtonIE> = (props) =>{
+    return(
+        <button    
+            onClick={()=>props.onClick()}
+            className={(props.isBig? styles.bigBtn:styles.btn) + " " + props.class}
+        >{props.children}</button>
+    )
+}

src/components/Checkbox/checkbox.module.css

@@ -0,0 +1,22 @@
+.checkBox{
+    display:inline-flex;
+    flex-direction: row;
+    gap:10px;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    color:aliceblue;
+    font-size: 14px;
+    align-items: center;
+}
+.box{
+    width: 22px !important;
+    height: 22px;
+    background-color: #181C22;
+    border-radius: 3px;
+    border: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}

src/components/Checkbox/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./checkbox.module.css"
+
+interface checkboxIE{
+    active:boolean
+    children:JSX.Element|string
+    class?:string
+    onClick:()=>void
+}
+
+export const Checkbox:React.FC<checkboxIE> = (props) =>{
+    return(
+        <div className={styles.checkBox + " " + props.class} onClick={()=>props.onClick()}>
+            <div className={styles.box}>{props.active? <img src="/images/check.svg"></img>: null}</div>
+            <div>
+                {props.children}
+            </div>
+        </div>
+    )
+}

src/components/EventComponent/event.module.css

@@ -0,0 +1,49 @@
+.eventCard{
+    width: 316px;
+    background: #1A1B1F;
+    border-radius: 14px;
+    font-size: 13px;
+    letter-spacing: 0.03em;
+    color: #dfdfdf;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content:space-between;
+    padding:10px 25px
+}
+
+.eventCard:hover{
+    box-shadow: -4px -4px 4px #1e1f24, 4px 4px 8px #16171a;
+}
+
+.eventTypeBar{
+    border-radius: 100px;
+    height: 10px;
+    width: 50px;
+}
+
+.wrapText{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap:5px
+}
+.date{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+}
+
+.moth{
+    color: #b1b1b1;
+
+}
+.eventWrapper{
+    display: flex;
+    flex-direction: column;
+    gap:15px
+}

src/components/EventComponent/eventCard.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import styles from "./event.module.css"
+import {EventIE, EventTypes} from "../../app/types"
+import { ClientRequestArgs } from "http";
+
+
+const month = [
+    "Январь",
+    "Февраль",
+    "Март",
+    "Апрель",
+    "Май",
+    "Июнь",
+    "Июль",
+    "Август",
+    "Сентябрь",
+    "Октябрь",
+    "Ноябрь",
+    "Декабрь"
+]
+
+export const EventCard:React.FC<{args:EventIE}> = (props) =>{
+    const [opened, setOpened] = useState(false)
+    let typeColor = props.args.type == EventTypes.AIM? "#00FF47": props.args.type == EventTypes.COMMENT? "#FF2828":"#0085FF"
+
+    return(
+        <div>
+            {
+            
+            !opened?
+            
+            <div className={styles.eventCard} onClick={()=>setOpened(true)}>
+                <div className={styles.wrapText}>
+                    <div>{props.args.name}</div>
+                    <div style={{backgroundColor: typeColor}} className={styles.eventTypeBar}></div>
+                </div>
+                <div className={styles.wrapText}>
+                    <div className={styles.date}>{props.args.date.getDate()}</div>
+                    <div className={styles.moth}>{month[props.args.date.getMonth()-1]}</div>
+                </div>
+            </div>
+            :
+            <div>
+                <div>
+                    <img src="/images/cross.svg" onClick={()=> setOpened(false)}></img>
+                </div>
+            </div>
+        }
+    </div>
+    )
+}

src/components/EventComponent/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./event.module.css"
+import {EventIE, EventTypes} from "../../app/types"
+import { EventCard } from "./eventCard";
+
+
+interface EventComponentIE{
+    events: EventIE[]
+}
+
+
+
+export const EventComponent:React.FC<EventComponentIE> = (props) =>{
+    return(
+        <div className={styles.eventWrapper}>
+            {
+                props.events.map((event)=>
+                    <EventCard args={event}></EventCard>
+                )
+            }
+        </div>
+    )
+}

src/components/Input/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./inp.module.css"
+
+interface InputIE{
+    placeholder:string
+    type?: string
+    onChange:(value:string)=>void
+    class?:string
+}
+
+export const Input:React.FC<InputIE> = (props) =>{
+    return(
+        <input
+            placeholder={props.placeholder}
+            type={props.type == undefined? "text":props.type}
+            onChange={(e)=>props.onChange(e.target.value)}
+            className={styles.inp + " " + props.class}
+        ></input>
+    )
+}

src/components/Input/inp.module.css

@@ -0,0 +1,18 @@
+.inp{
+    background: #23252C;
+    border-radius: 14px;
+    height: 40px;
+    line-height: 40px;
+    border: 0px;
+    padding: 0 14px;
+    color: #4D505B;
+    font-size: 12px;
+    width: 100%;
+    max-width: 400px;
+}
+.inp:hover{
+    box-shadow: -3px -3px 8px rgb(255 255 255 / 5%), 3px 3px 8px rgb(0 0 0 / 5%);
+}
+.inp:focus{
+    color: #fff;
+}

src/features/counter/Counter.module.css

@@ -1,79 +0,0 @@
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.row > button {
-  margin-left: 4px;
-  margin-right: 8px;
-}
-
-.row:not(:last-child) {
-  margin-bottom: 16px;
-}
-
-.value {
-  font-size: 78px;
-  padding-left: 16px;
-  padding-right: 16px;
-  margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
-}
-
-.button {
-  appearance: none;
-  background: none;
-  font-size: 32px;
-  padding-left: 12px;
-  padding-right: 12px;
-  outline: none;
-  border: 2px solid transparent;
-  color: rgb(112, 76, 182);
-  padding-bottom: 4px;
-  cursor: pointer;
-  background-color: rgba(112, 76, 182, 0.1);
-  border-radius: 2px;
-  transition: all 0.15s;
-}
-
-.textbox {
-  font-size: 32px;
-  padding: 2px;
-  width: 64px;
-  text-align: center;
-  margin-right: 4px;
-}
-
-.button:hover,
-.button:focus {
-  border: 2px solid rgba(112, 76, 182, 0.4);
-}
-
-.button:active {
-  background-color: rgba(112, 76, 182, 0.2);
-}
-
-.asyncButton {
-  composes: button;
-  position: relative;
-}
-
-.asyncButton:after {
-  content: '';
-  background-color: rgba(112, 76, 182, 0.15);
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  transition: width 1s linear, opacity 0.5s ease 1s;
-}
-
-.asyncButton:active:after {
-  width: 0%;
-  opacity: 1;
-  transition: 0s;
-}

src/features/counter/Counter.spec.tsx

@@ -1,105 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import user from '@testing-library/user-event'
-import { Provider } from 'react-redux'
-
-jest.mock('./counterAPI', () => ({
-  fetchCount: (amount: number) =>
-    new Promise<{ data: number }>((resolve) =>
-      setTimeout(() => resolve({ data: amount }), 500)
-    ),
-}))
-
-import { makeStore } from '../../app/store'
-import Counter from './Counter'
-
-describe('<Counter />', () => {
-  it('renders the component', () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    expect(screen.getByText('0')).toBeInTheDocument()
-  })
-
-  it('decrements the value', () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    user.click(screen.getByRole('button', { name: /decrement value/i }))
-
-    expect(screen.getByText('-1')).toBeInTheDocument()
-  })
-
-  it('increments the value', () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    user.click(screen.getByRole('button', { name: /increment value/i }))
-
-    expect(screen.getByText('1')).toBeInTheDocument()
-  })
-
-  it('increments by amount', () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}5')
-    user.click(screen.getByRole('button', { name: /add amount/i }))
-
-    expect(screen.getByText('5')).toBeInTheDocument()
-  })
-
-  it('increments async', async () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}3')
-    user.click(screen.getByRole('button', { name: /add async/i }))
-
-    await expect(screen.findByText('3')).resolves.toBeInTheDocument()
-  })
-
-  it('increments if amount is odd', async () => {
-    const store = makeStore()
-
-    render(
-      <Provider store={store}>
-        <Counter />
-      </Provider>
-    )
-
-    user.click(screen.getByRole('button', { name: /add if odd/i }))
-
-    expect(screen.getByText('0')).toBeInTheDocument()
-
-    user.click(screen.getByRole('button', { name: /increment value/i }))
-    user.type(screen.getByLabelText(/set increment amount/i), '{backspace}8')
-    user.click(screen.getByRole('button', { name: /add if odd/i }))
-
-    await expect(screen.findByText('9')).resolves.toBeInTheDocument()
-  })
-})

src/features/counter/Counter.tsx

@@ -1,70 +0,0 @@
-import { useState } from 'react'
-
-import { useAppSelector, useAppDispatch } from '../../app/hooks'
-import {
-  decrement,
-  increment,
-  incrementByAmount,
-  incrementAsync,
-  incrementIfOdd,
-  selectCount,
-} from './counterSlice'
-import styles from './Counter.module.css'
-
-function Counter() {
-  const dispatch = useAppDispatch()
-  const count = useAppSelector(selectCount)
-  const [incrementAmount, setIncrementAmount] = useState('2')
-
-  const incrementValue = Number(incrementAmount) || 0
-
-  return (
-    <div>
-      <div className={styles.row}>
-        <button
-          className={styles.button}
-          aria-label="Decrement value"
-          onClick={() => dispatch(decrement())}
-        >
-          -
-        </button>
-        <span className={styles.value}>{count}</span>
-        <button
-          className={styles.button}
-          aria-label="Increment value"
-          onClick={() => dispatch(increment())}
-        >
-          +
-        </button>
-      </div>
-      <div className={styles.row}>
-        <input
-          className={styles.textbox}
-          aria-label="Set increment amount"
-          value={incrementAmount}
-          onChange={(e) => setIncrementAmount(e.target.value)}
-        />
-        <button
-          className={styles.button}
-          onClick={() => dispatch(incrementByAmount(incrementValue))}
-        >
-          Add Amount
-        </button>
-        <button
-          className={styles.asyncButton}
-          onClick={() => dispatch(incrementAsync(incrementValue))}
-        >
-          Add Async
-        </button>
-        <button
-          className={styles.button}
-          onClick={() => dispatch(incrementIfOdd(incrementValue))}
-        >
-          Add If Odd
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default Counter

src/features/counter/counterAPI.ts

@@ -1,12 +0,0 @@
-export async function fetchCount(amount = 1): Promise<{ data: number }> {
-  const response = await fetch('/api/counter', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ amount }),
-  })
-  const result = await response.json()
-
-  return result
-}

src/features/counter/counterSlice.ts

@@ -1,82 +0,0 @@
-import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
-
-import type { AppState, AppThunk } from '../../app/store'
-import { fetchCount } from './counterAPI'
-
-export interface CounterState {
-  value: number
-  status: 'idle' | 'loading' | 'failed'
-}
-
-const initialState: CounterState = {
-  value: 0,
-  status: 'idle',
-}
-
-// The function below is called a thunk and allows us to perform async logic. It
-// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
-// will call the thunk with the `dispatch` function as the first argument. Async
-// code can then be executed and other actions can be dispatched. Thunks are
-// typically used to make async requests.
-export const incrementAsync = createAsyncThunk(
-  'counter/fetchCount',
-  async (amount: number) => {
-    const response = await fetchCount(amount)
-    // The value we return becomes the `fulfilled` action payload
-    return response.data
-  }
-)
-
-export const counterSlice = createSlice({
-  name: 'counter',
-  initialState,
-  // The `reducers` field lets us define reducers and generate associated actions
-  reducers: {
-    increment: (state) => {
-      // Redux Toolkit allows us to write "mutating" logic in reducers. It
-      // doesn't actually mutate the state because it uses the Immer library,
-      // which detects changes to a "draft state" and produces a brand new
-      // immutable state based off those changes
-      state.value += 1
-    },
-    decrement: (state) => {
-      state.value -= 1
-    },
-    // Use the PayloadAction type to declare the contents of `action.payload`
-    incrementByAmount: (state, action: PayloadAction<number>) => {
-      state.value += action.payload
-    },
-  },
-  // The `extraReducers` field lets the slice handle actions defined elsewhere,
-  // including actions generated by createAsyncThunk or in other slices.
-  extraReducers: (builder) => {
-    builder
-      .addCase(incrementAsync.pending, (state) => {
-        state.status = 'loading'
-      })
-      .addCase(incrementAsync.fulfilled, (state, action) => {
-        state.status = 'idle'
-        state.value += action.payload
-      })
-  },
-})
-
-export const { increment, decrement, incrementByAmount } = counterSlice.actions
-
-// The function below is called a selector and allows us to select a value from
-// the state. Selectors can also be defined inline where they're used instead of
-// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
-export const selectCount = (state: AppState) => state.counter.value
-
-// We can also write thunks by hand, which may contain both sync and async logic.
-// Here's an example of conditionally dispatching actions based on current state.
-export const incrementIfOdd =
-  (amount: number): AppThunk =>
-  (dispatch, getState) => {
-    const currentValue = selectCount(getState())
-    if (currentValue % 2 === 1) {
-      dispatch(incrementByAmount(amount))
-    }
-  }
-
-export default counterSlice.reducer

src/pages/index.tsx

@@ -1,61 +1,43 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import { useState } from 'react'
+import { EventIE, EventTypes } from '../app/types'
+import { Button } from '../components/Button'
+import { Checkbox } from '../components/Checkbox'
+import { EventComponent } from '../components/EventComponent'
+import { Input } from '../components/Input'
 
-import Counter from '../features/counter/Counter'
 import styles from '../styles/Home.module.css'
 
+const mockData = [
+  {
+    date: new Date(2005, 11, 3),
+    name:"очень важная цель",
+    description: "очень большое и крутое описание",
+    type: EventTypes.AIM
+  } as EventIE,
+  {
+    date: new Date(2006, 1, 10),
+    name: "Комментарий для лоха",
+    description: "ты лошара тупая",
+    isModerated: true,
+    type: EventTypes.COMMENT
+  } as EventIE
+]
+
+
 const IndexPage: NextPage = () => {
+
   return (
     <div className={styles.container}>
       <Head>
         <title>Redux Toolkit</title>
         <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com"/>
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"></link>
       </Head>
-      <header className={styles.header}>
+      <EventComponent events={mockData}></EventComponent>
-        <img src="/logo.svg" className={styles.logo} alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <span>
-          <span>Learn </span>
-          <a
-            className={styles.link}
-            href="https://reactjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className={styles.link}
-            href="https://redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className={styles.link}
-            href="https://redux-toolkit.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          ,<span> and </span>
-          <a
-            className={styles.link}
-            href="https://react-redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-        </span>
-      </header>
     </div>
   )
 }

src/pages/registration/index.tsx

@@ -0,0 +1 @@
+import React from "react";

src/styles/Home.module.css

@@ -1,39 +1,3 @@
 .container{
-  text-align: center;
+  margin: 100px;
-}
-
-.logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.link {
-  color: rgb(112, 76, 182);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logo {
-    animation: logo-float infinite 3s ease-in-out;
-  }
-}
-
-@keyframes logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
 }

src/styles/globals.css

@@ -2,8 +2,9 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Jost', sans-serif;
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  background-color: #14171b;
 }
 
 a {
@@ -12,5 +13,7 @@ a {
 }
 
 * {
+  outline: none;
   box-sizing: border-box;
+  transition: 0.3s;
 }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }