nandi.uk
This repository has no description
feat: add card example to tinker mode setting
author
Pouria Delfanazari
date
(May 6, 2026, 2:49 PM -0700)
commit
eac6b363
eac6b363f6bb6c999cb91ac33a40069e9f706503
parent
767999b6
767999b6556d6261ba1cfb918e4b5681114285a8
+138
-11
+138
-11
src/webapp/features/settings/containers/advancedContainer/AdvancedContainer.tsx
+138
-11
src/webapp/features/settings/containers/advancedContainer/AdvancedContainer.tsx
···
1
1
'use client';
2
2
3
-
import { Container, Stack, Switch, Group, Card, Text } from '@mantine/core';
3
+
import {
4
+
Container,
5
+
Stack,
6
+
Switch,
7
+
Group,
8
+
Card,
9
+
Text,
10
+
Image,
11
+
AspectRatio,
12
+
Anchor,
13
+
SimpleGrid,
14
+
Badge,
15
+
} from '@mantine/core';
16
+
import { CodeHighlightTabs } from '@mantine/code-highlight';
4
17
import { useUserSettings } from '../../lib/queries/useUserSettings';
5
18
19
+
const MOCK_CARD_CONTENT = {
20
+
url: 'https://example.com/understanding-atproto',
21
+
title: 'Understanding the AT Protocol',
22
+
description:
23
+
'A deep dive into the architecture behind decentralized social networking.',
24
+
author: 'Alex Johnson',
25
+
siteName: 'example.com',
26
+
imageUrl: 'https://picsum.photos/seed/atproto/300/300',
27
+
type: 'article',
28
+
retrievedAt: '2025-01-15T10:30:00Z',
29
+
};
30
+
31
+
const MOCK_CARD_AUTHOR = {
32
+
did: 'did:plc:abc123xyz',
33
+
handle: 'alex.example.com',
34
+
name: 'Alex Johnson',
35
+
avatarUrl: 'https://picsum.photos/seed/avatar/100/100',
36
+
};
37
+
38
+
function MockCardPreview() {
39
+
return (
40
+
<Group justify="space-between" align="start" gap="lg">
41
+
<Stack gap={0} flex={1}>
42
+
<Anchor
43
+
href={MOCK_CARD_CONTENT.url}
44
+
target="_blank"
45
+
c="gray"
46
+
fz="sm"
47
+
onClick={(e) => e.preventDefault()}
48
+
style={{ cursor: 'default' }}
49
+
>
50
+
{MOCK_CARD_CONTENT.siteName}
51
+
</Anchor>
52
+
<Text c="bright" lineClamp={2} fw={500}>
53
+
{MOCK_CARD_CONTENT.title}
54
+
</Text>
55
+
<Text c="gray" fz="sm" mt="xs" lineClamp={3}>
56
+
{MOCK_CARD_CONTENT.description}
57
+
</Text>
58
+
</Stack>
59
+
<AspectRatio ratio={1 / 1}>
60
+
<Image
61
+
src={MOCK_CARD_CONTENT.imageUrl}
62
+
alt="Mock card preview"
63
+
radius="md"
64
+
w={60}
65
+
h={60}
66
+
/>
67
+
</AspectRatio>
68
+
</Group>
69
+
);
70
+
}
71
+
6
72
export default function AdvancedContainer() {
7
73
const { settings, updateSetting } = useUserSettings();
8
74
9
75
return (
10
76
<Container p="xs" size="xs">
11
-
<Stack gap="xl">
12
-
<Card bg={'var(--mantine-color-gray-light)'} radius={'lg'}>
77
+
<Stack gap="md">
78
+
<Stack gap={4}>
13
79
<Group justify="space-between">
14
-
<Stack gap={0}>
15
-
<Text fw={500} c={'gray'}>
16
-
Tinker mode
17
-
</Text>
18
-
<Text fw={500} c={'gray'} fz={'sm'}>
19
-
See the Matrix (data exposed as raw JSON)
20
-
</Text>
21
-
</Stack>
80
+
<Text fw={500}>Tinker mode</Text>
22
81
<Switch
23
82
size="md"
24
83
onLabel="ON"
···
30
89
}
31
90
/>
32
91
</Group>
92
+
<Text fw={500} c={'gray'} fz={'sm'}>
93
+
Reveals raw data structures throughout the app — feed items, cards,
94
+
and collections expand to show the underlying AT Protocol records.
95
+
</Text>
96
+
</Stack>
97
+
98
+
<Card bg={'var(--mantine-color-gray-light)'} radius={'lg'} p="md">
99
+
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
100
+
<Stack gap="xs">
101
+
<Badge variant="light" color="gray" size="sm" w="fit-content">
102
+
Off
103
+
</Badge>
104
+
<Card
105
+
radius="md"
106
+
withBorder
107
+
p="sm"
108
+
opacity={settings.tinkerMode ? 0.5 : 1}
109
+
style={{
110
+
transition: 'opacity 200ms ease',
111
+
outline: !settings.tinkerMode
112
+
? '2px solid var(--mantine-primary-color-filled)'
113
+
: undefined,
114
+
}}
115
+
>
116
+
<MockCardPreview />
117
+
</Card>
118
+
</Stack>
119
+
120
+
<Stack gap="xs">
121
+
<Badge variant="light" color="gray" size="sm" w="fit-content">
122
+
On
123
+
</Badge>
124
+
<Card
125
+
radius="md"
126
+
withBorder
127
+
p="sm"
128
+
opacity={settings.tinkerMode ? 1 : 0.5}
129
+
style={{
130
+
transition: 'opacity 200ms ease',
131
+
outline: settings.tinkerMode
132
+
? '2px solid var(--mantine-primary-color-filled)'
133
+
: undefined,
134
+
}}
135
+
>
136
+
<Stack gap="sm">
137
+
<MockCardPreview />
138
+
<CodeHighlightTabs
139
+
code={[
140
+
{
141
+
fileName: 'Content',
142
+
code: JSON.stringify(MOCK_CARD_CONTENT, null, 2),
143
+
language: 'json',
144
+
},
145
+
{
146
+
fileName: 'Author',
147
+
code: JSON.stringify(MOCK_CARD_AUTHOR, null, 2),
148
+
language: 'json',
149
+
},
150
+
]}
151
+
radius="md"
152
+
withBorder
153
+
style={{ cursor: 'auto', zIndex: 0 }}
154
+
defaultExpanded={false}
155
+
/>
156
+
</Stack>
157
+
</Card>
158
+
</Stack>
159
+
</SimpleGrid>
33
160
</Card>
34
161
</Stack>
35
162
</Container>