Max Sagaidak

Доброе утро ! Я предполагаю что ты совсем новичок, по этому опишу два варианта с БД, и без бд.

1
Если это типо пет проект, и тебе нужно реализовать такой функционал, банально без сервера, базы данных и тд, просто можешь сделать отдельный файл, например: cards.js и м нем реализовать:

export const cards = [
 {
  name: example,
  description: example,
  imgUrl: example,
  atData: Data.now(),
 },
 ....
]

Потом ты можешь import {cards} from 'cards.js' и перебирать все карточки и искать например те которые были добавлены за последние 24 часа, Date.now() - (1000*60*60*24) и проверять if cards[0].atData > Date.now() - (1000*60*60*24) то тогда показывать карточку, иначе нет.

Это решение можно оптимизировать, например брать последние 10 карточек из массива card и просто их предварительно сортировать что бы последнем были всегда новые. Но если у тебя не много карточек, то можно и так.

2
С БД, и сервером там намного проще и интереснее, каждая БД может по правильному к ней запросу вернуть только последние записи, например последние 10, просто заранее надо добавлять индекс 1, 2, 3... каждой записи, и тогда мы сможем получать последние записи, и выводить их, так конечно все звучит прям изи, но на практике навряд ли ты сможешь развернуть клиент + сервер + бд, настроить подключения, и делать правильные запросы. Нужно больше практики.

Если вдруг надумаешь писать сервер, для начала бери ты express + mongoDB

Потом может перерастёшь на nestJS + postgreSQL например.

И так, для меня в будущем, и для тех кто это нагуглил:

Дело в том что без виджета на начало 2024 сделать авторизацию практический не возможно, вот реально правильное решение если у вас похожий стэк, и вы планируете делегировать саму регистрацию на сервер, а не делать все через front.

Интегрируем виджет в приложение react + ts:
(это если вам надо что бы был не редирект, а вызов функции со стороны telegram)

import { useEffect } from 'react'
import { ITelegramUser } from '../../../../types/telegram/api-telegram-user.ts'

declare global {
  interface Window {
    onTelegramAuth: (user: ITelegramUser) => void
  }
}

export const ButtonTelegramAuth = () => {
  useEffect(() => {
    const button = document.createElement('script')
    button.async = true
    button.src = 'https://telegram.org/js/telegram-widget.js?22'
    button.setAttribute('data-telegram-login', 'name_bot')
    button.setAttribute('data-size', 'large')
    button.setAttribute('data-radius', '20')
    button.setAttribute('data-onauth', 'onTelegramAuth')

    document.body.appendChild(button)

    window.onTelegramAuth = function (user) {
      alert(
        'Logged in as ' +
          user.first_name +
          ' ' +
          user.last_name +
          ' (' +
          user.id +
          (user.username ? ', @' + user.username : '') +
          ')'
      )
    }

    return () => {
      document.body.removeChild(button)
    }
  }, [])

  return <div id="telegram-widget-container"></div>
}

если нужен все таки редирект мы добавляем такое поле:

script.setAttribute('data-auth-url', 'https://site.pw');

и удаляем это:

button.setAttribute('data-onauth', 'onTelegramAuth')

declare global {
  interface Window {
    onTelegramAuth: (user: ITelegramUser) => void
  }
}

 window.onTelegramAuth = function (user) {
      alert(
        'Logged in as ' +
          user.first_name +
          ' ' +
          user.last_name +
          ' (' +
          user.id +
          (user.username ? ', @' + user.username : '') +
          ')'
      )
    }

И так объясняю в чем задумка:
В ваше приложение react интегрируется все тот же виджет, но правильным образом. После нажатия на виджет происходит авторизация пользователя (он вводит свои данные / просто нажимает войти). Потом телеграм передает все его данные вам (в функцию - №1 способ / по get параметрам в url). Если вы делегируете
регистрацию на сервер (а так правильно) то выбираете 2 способ. Сервер получает данные валидирует их и заносит в БД, затем делает редирект вашего пользователя к вам обратно на front, и заносит token (или что там еще не разобрался) в HttpOnly Ckookie. Ну а далее в моем случае Guard будет проверять есть этот token или нет, годен он или нет.

Передаю привет Максиму в будущем. Как дела Макс ?

Если я правильно понял, переделай функцию "addTask" :

function addTask(event) {
        if (event.key === "Enter") {
            setTasks(prev => [...prev, task])
        }

        setTask("");
    }

Но у тебя неправильно написана отрисовка масива с tasks, но может ты просто еще не подписал. Если что отпиши в коменты я отвечу.

Settings | Editor | General | Appearance | Enable HTML tag tree highlighting

спасибо Araya, подсказали как гуглить

Эту проблему я кстати решил, просто из-за декомпозиции я потерял элементы которым, задавал тени, и в конце концов задавал их не тем элементам.

Как говорится, сам изобрел проблему, сам спустя 12 часов решил, смотрите проблема в том что элементы внутри слайда не давали ему нормально работать, пришлось мне написать для них position absolute, повлияло на элементы в моем случае текст это ровно никак, но слайдер начал работать верно, может ком-то будет полезно. Мне в будущем ПРИВЕТ)

Здаров, было бы правильно с твой стороны это переделать версту, дабы надстроить контейнер над header и главным твоим блоком (не помню как ты его назвал). И этому контейнеру обычно задаются стили типо:

.wraper {
 max-width: 1200px; (сколько нужно напиши)
 margin 0 auto;
}

https://codepen.io/luke-codewalker/pen/zJOjvN

let cardNum = document.querySelector('#card-num');
let imageCopy = document.querySelector('.image-copy');

imageCopy.addEventListener('click', function(){
    navigator.clipboard.writeText(cardNum.value);
})