alsaze/Kotyata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Nadar
2026-03-17 13:24:22 +03:00
commit 82e5ac9d81
554 changed files with 29637 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
apps/client/components/notification-card/base.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="notification-card" :class="{ 'not-read': !read }">
<div class="notification-card__icon">
<Component :is="resolveComponent(`ui-icon-${icon}`)" />
</div>
<div class="notification-card__content">
<p class="notification-card__title">
{{ title }}
</p>
<div class="notification-card__subtitle-wrapper">
<span class="notification-card__subtitle">
{{ subtitle }}
</span>
<span class="notification-card__date">
Сегодня в 14:40
</span>
</div>
<slot />
</div>
</div>
</template>
<script setup lang="ts">
import type { UiIcon } from '#build/types/ui/icons'
export interface Props {
icon: UiIcon
title: string
subtitle: string
read: boolean
}
defineProps<Props>()
</script>
<style lang="scss">
.notification-card {
position: relative;
display: grid;
grid-template-columns: 32px auto;
gap: 8px;
padding: 8px;
border-radius: 12px;
cursor: pointer;
outline: 1px solid transparent;
outline-offset: -1px;
transition: .2s ease-out;
transition-property: background-color, outline-color;
&:hover {
background-color: #F7F9FF;
}
&:active {
outline-color: $clr-cyan-300;
}
&.not-read {
&::after {
content: '';
position: absolute;
top: 12px;
right: 8px;
width: 6px;
height: 6px;
background-color: $clr-red-500;
border-radius: 50%;
}
}
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
color: var(--notification-card-icon-color, $clr-grey-500);
background-color: var(--notification-card-icon-background, $clr-grey-200);
}
&__content {
}
&__title {
@include txt-r-sb;
margin-bottom: 4px;
}
&__subtitle-wrapper {
@include txt-t-m;
display: flex;
justify-content: space-between;
}
&__subtitle {
color: $clr-grey-600;
}
&__date {
color: $clr-grey-400;
}
}
</style>

38
apps/client/components/notification-card/completed-withdraw.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<NotificationCardBase icon="s-up-right" v-bind="props" class="card">
<p class="amount">
<span>Валюта: <strong>USDT</strong></span>
<span>Сумма: <strong>500</strong></span>
</p>
</NotificationCardBase>
</template>
<script setup lang="ts">
import type { Props } from './base.vue'
const props = defineProps<Omit<Props, 'icon'>>()
</script>
<style lang="scss" scoped>
.card {
--notification-card-icon-color: #{$clr-cyan-600};
}
.amount {
@include txt-s;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 6px;
color: $clr-grey-500;
margin-top: 8px;
background-color: $clr-grey-200;
height: 32px;
strong {
font-weight: 600;
}
}
</style>

39
apps/client/components/notification-card/deposit.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<NotificationCardBase icon="s-down-left" v-bind="props" class="card">
<p class="amount">
<span>Валюта: <strong>USDT</strong></span>
<span>Сумма: <strong>500</strong></span>
</p>
</NotificationCardBase>
</template>
<script setup lang="ts">
import type { Props } from './base.vue'
const props = defineProps<Omit<Props, 'icon'>>()
</script>
<style lang="scss" scoped>
.card {
--notification-card-icon-color: #{$clr-green-500};
--notification-card-icon-background: #{$clr-green-100};
}
.amount {
@include txt-s;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 6px;
color: $clr-grey-500;
margin-top: 8px;
background-color: $clr-grey-200;
height: 32px;
strong {
font-weight: 600;
}
}
</style>

43
apps/client/components/notification-card/sign-in.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<NotificationCardBase icon="s-exit" v-bind="props">
<p class="location">
Местоположение: Moscow, Russia
</p>
<p class="alert">
Если это были не вы срочно
<UiButton type="link" size="small">
смените пароль
</UiButton>
или
<UiButton type="link" size="small">
свяжитесь с поддержкой
</UiButton>
</p>
</NotificationCardBase>
</template>
<script setup lang="ts">
import type { Props } from './base.vue'
const props = defineProps<Omit<Props, 'icon'>>()
</script>
<style lang="scss" scoped>
.location {
@include txt-s-m;
color: $clr-grey-400;
margin-top: 4px;
margin-bottom: 8px;
}
.alert {
@include txt-r-m;
padding: 8px;
border-radius: 6px;
background-color: $clr-grey-200;
color: $clr-grey-500;
}
</style>

51
apps/client/components/notification-card/withdraw-created.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<NotificationCardBase icon="s-clock" v-bind="props" class="card">
<div class="row">
<p class="amount">
<span>Валюта: <strong>USDT</strong></span>
<span>Сумма: <strong>500</strong></span>
</p>
<UiButton class="support" size="small" type="outlined" color="secondary">
Support
</UiButton>
</div>
</NotificationCardBase>
</template>
<script setup lang="ts">
import type { Props } from './base.vue'
const props = defineProps<Omit<Props, 'icon'>>()
</script>
<style lang="scss" scoped>
.card {
--notification-card-icon-color: #{$clr-warn-500};
--notification-card-icon-background: #{$clr-warn-200};
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.amount {
@include txt-s;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 6px;
color: $clr-grey-500;
background-color: $clr-grey-200;
height: 32px;
strong {
font-weight: 600;
}
}
</style>