Skip to content

Commit 9eef8a8

Browse files
haxgunhaxgun
committed
feat(frontend): update preview and add localization
1 parent 36c4639 commit 9eef8a8

File tree

12 files changed

+186
-18
lines changed

12 files changed

+186
-18
lines changed

‎frontend/public/images/linear.webp‎

-315 KB
Binary file not shown.

‎frontend/public/images/screen.webp‎

8.35 KB
Loading

‎frontend/src/components/HomePage/Preview.vue‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,46 @@
11
<script setup lang="ts">
22
import ContainerScroll from '@/components/ui/ContainerScroll/ContainerScroll.vue'
3+
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
4+
import { PREVIEW_TABS_DATA } from '@/data/PreviewTabs.data'
35
</script>
46

57
<template>
68
<section>
7-
<div class="mb-16 flex flex-col">
8-
<ContainerScroll>
9-
<template #title>
10-
<h1 class="text-6xl font-bold">Какой-то текст</h1>
11-
</template>
12-
<template #card>
13-
<img
14-
src="/images/linear.webp"
15-
class="mx-auto h-full rounded-2xl object-cover object-left-top"
16-
alt="hero"
17-
height="3104"
18-
width="5480"
19-
/>
20-
</template>
21-
</ContainerScroll>
22-
</div>
9+
<Tabs default-value="home">
10+
<div class="mb-16 flex flex-col">
11+
<ContainerScroll>
12+
<template #title>
13+
<TabsList
14+
class="flex w-full flex-row gap-1 border border-white/10 bg-black/5 backdrop-blur-sm"
15+
>
16+
<TabsTrigger
17+
v-memo="tab"
18+
v-for="tab in PREVIEW_TABS_DATA"
19+
:key="tab.value"
20+
:value="tab.value"
21+
>
22+
{{ $t(`previews.${tab.value}`) }}
23+
</TabsTrigger>
24+
</TabsList>
25+
</template>
26+
<template #card>
27+
<TabsContent
28+
v-memo="tab"
29+
v-for="tab in PREVIEW_TABS_DATA"
30+
:key="tab.value"
31+
:value="tab.value"
32+
>
33+
<img
34+
:src="tab.content"
35+
class="mx-auto h-full rounded-2xl object-cover object-left-top"
36+
alt="hero"
37+
height="3104"
38+
width="5480"
39+
/>
40+
</TabsContent>
41+
</template>
42+
</ContainerScroll>
43+
</div>
44+
</Tabs>
2345
</section>
2446
</template>

‎frontend/src/components/ui/ContainerScroll/ContainerScrollCard.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
boxShadow:
66
'0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
77
}"
8-
class="mx-auto -mt-48 h-[30rem] w-full max-w-5xl rounded-[15px] border border-[#f2f2f2]/10 shadow-2xl md:h-[40rem]"
8+
class="mx-auto -mt-48 h-fit w-full max-w-5xl rounded-[15px] border border-[#f2f2f2]/10 shadow-2xl"
99
>
10-
<div class="size-full overflow-hidden rounded-[15px]">
10+
<div class="size-fit overflow-hidden rounded-[15px]">
1111
<slot></slot>
1212
</div>
1313
</div>

‎frontend/src/components/ui/tabs/Tabs.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
3+
import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
4+
5+
const props = defineProps<TabsRootProps>()
6+
const emits = defineEmits<TabsRootEmits>()
7+
8+
const forwarded = useForwardPropsEmits(props, emits)
9+
</script>
10+
11+
<template>
12+
<TabsRoot v-bind="forwarded">
13+
<slot />
14+
</TabsRoot>
15+
</template>

‎frontend/src/components/ui/tabs/TabsContent.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import type { TabsContentProps } from 'radix-vue'
3+
import { TabsContent } from 'radix-vue'
4+
import type { HTMLAttributes } from 'vue'
5+
import { computed } from 'vue'
6+
7+
import { cn } from '@/utils'
8+
9+
const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
</script>
17+
18+
<template>
19+
<TabsContent :class="cn(props.class)" v-bind="delegatedProps">
20+
<slot />
21+
</TabsContent>
22+
</template>

‎frontend/src/components/ui/tabs/TabsList.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import type { TabsListProps } from 'radix-vue'
3+
import { TabsList } from 'radix-vue'
4+
import type { HTMLAttributes } from 'vue'
5+
import { computed } from 'vue'
6+
7+
import { cn } from '@/utils'
8+
9+
const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
</script>
17+
18+
<template>
19+
<TabsList
20+
v-bind="delegatedProps"
21+
:class="
22+
cn(
23+
'inline-flex items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground',
24+
props.class,
25+
)
26+
"
27+
>
28+
<slot />
29+
</TabsList>
30+
</template>

‎frontend/src/components/ui/tabs/TabsTrigger.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import type { TabsTriggerProps } from 'radix-vue'
3+
import { TabsTrigger, useForwardProps } from 'radix-vue'
4+
import type { HTMLAttributes } from 'vue'
5+
import { computed } from 'vue'
6+
7+
import { cn } from '@/utils'
8+
9+
const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
17+
const forwardedProps = useForwardProps(delegatedProps)
18+
</script>
19+
20+
<template>
21+
<TabsTrigger
22+
v-bind="forwardedProps"
23+
:class="
24+
cn(
25+
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-base font-medium text-[#aaaaaa] ring-offset-background transition-all hover:bg-white/10 hover:text-[#f2f2f2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/20 data-[state=active]:text-[#f2f2f2] data-[state=active]:shadow-sm',
26+
props.class,
27+
)
28+
"
29+
>
30+
<span class="truncate">
31+
<slot />
32+
</span>
33+
</TabsTrigger>
34+
</template>

‎frontend/src/components/ui/tabs/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as Tabs } from './Tabs.vue'
2+
export { default as TabsContent } from './TabsContent.vue'
3+
export { default as TabsList } from './TabsList.vue'
4+
export { default as TabsTrigger } from './TabsTrigger.vue'

‎frontend/src/data/PreviewTabs.data.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export interface PreviewTabsData {
2+
value: string
3+
content: string
4+
}
5+
6+
export const PREVIEW_TABS_DATA: PreviewTabsData[] = [
7+
{
8+
value: 'home',
9+
content: '/images/screen.webp',
10+
},
11+
{
12+
value: 'valorant',
13+
content: '/images/screen.webp',
14+
},
15+
{
16+
value: 'faceit',
17+
content: '/images/screen.webp',
18+
},
19+
{
20+
value: 'music',
21+
content: '/images/screen.webp',
22+
},
23+
{
24+
value: 'bot',
25+
content: '/images/screen.webp',
26+
},
27+
]

0 commit comments

Comments
 (0)