Skip to content

Commit 5455a76

Browse files
ananyayaya129ananyayaya129
committed
settings page layout done
1 parent 4ceed73 commit 5455a76

File tree

17 files changed

+345
-126
lines changed

17 files changed

+345
-126
lines changed

‎platforms/metagram/src/lib/fragments/Header/Header.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
4646
const classes = $derived({
4747
common: cn(
48-
'flex items-center justify-between my-4 pb-4 border-b-[1px] md:border-0 border-grey w-full px-4'
48+
'flex items-center justify-between my-4 pb-4 border-b-[1px] md:border-0 border-grey px-4'
4949
),
5050
text: variantClasses[variant].text,
5151
background: variantClasses[variant].background

‎platforms/metagram/src/lib/fragments/RightAside/RightAside.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<script lang="ts">
22
import type { Snippet } from 'svelte';
33
import type { HTMLAttributes } from 'svelte/elements';
4+
import { Header } from '..';
45
56
interface IRightAsideProps extends HTMLAttributes<HTMLElement> {
6-
header: string;
7+
header: Snippet;
78
asideContent: Snippet;
89
}
910
let { header, asideContent, ...restProps }: IRightAsideProps = $props();
1011
</script>
1112

12-
<aside {...restProps} class="hidden w-full md:block">
13+
<aside {...restProps} class="hidden border border-y-0 border-s-gray-200 md:block md:pt-13">
1314
<div class="mx-5">
14-
<h2 class="mb-8 text-lg font-semibold">{header}</h2>
15+
<h2 class="mb-11 text-lg font-semibold">
16+
{@render header?.()}
17+
</h2>
1518
<div>
1619
{@render asideContent?.()}
1720
</div>

‎platforms/metagram/src/lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
alt=""
4444
/>
4545
{/if}
46-
<h3 class="text-black-800 text-base font-semibold">
46+
<h3 class="text-black-800 text-base">
4747
{@render children?.()}
4848
</h3>
4949
</div>

‎platforms/metagram/src/lib/fragments/SettingsPage/SettingsPage.svelte‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
import { page } from '$app/state';
4+
import SettingsNavigationButton from '$lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte';
5+
import {
6+
CustomerSupportIcon,
7+
DatabaseIcon,
8+
Logout01Icon,
9+
Message01Icon,
10+
Notification02FreeIcons
11+
} from '@hugeicons/core-free-icons';
12+
import { HugeiconsIcon } from '@hugeicons/svelte';
13+
14+
let route = $derived(page.url.pathname);
15+
</script>
16+
17+
<div class="flex flex-col gap-5 px-5 py-2 md:gap-8">
18+
<div class="bg-grey rounded-xl p-3 md:p-5">
19+
<SettingsNavigationButton
20+
onclick={() => goto('/settings/asdf/account')}
21+
profileSrc="https://picsum.photos/200/300"
22+
>
23+
{#snippet children()}
24+
<div class="flex flex-col items-start">
25+
<h2 class="text-lg">_.ananyayaya._</h2>
26+
<p class="text-sm">[email protected]</p>
27+
</div>
28+
{/snippet}
29+
</SettingsNavigationButton>
30+
</div>
31+
<hr class="text-grey" />
32+
<div class="flex flex-col gap-5">
33+
<h3 class="text-brand-burnt-orange text-base font-semibold">Personalisation</h3>
34+
<div class="{route === '/settings/asdf/notifications' ? 'bg-grey' : ''} rounded-xl p-2">
35+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/notifications')}>
36+
{#snippet leadingIcon()}
37+
<HugeiconsIcon
38+
size="24px"
39+
icon={Notification02FreeIcons}
40+
color="var(--color-brand-burnt-orange)"
41+
/>
42+
{/snippet}
43+
{#snippet children()}
44+
Notifications
45+
{/snippet}
46+
</SettingsNavigationButton>
47+
</div>
48+
<div class="{route === '/settings/asdf/direct-messages' ? 'bg-grey' : ''} rounded-xl p-2">
49+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/direct-messages')}>
50+
{#snippet leadingIcon()}
51+
<HugeiconsIcon
52+
size="24px"
53+
icon={Message01Icon}
54+
color="var(--color-brand-burnt-orange)"
55+
/>
56+
{/snippet}
57+
{#snippet children()}
58+
Direct Messages
59+
{/snippet}
60+
</SettingsNavigationButton>
61+
</div>
62+
</div>
63+
<hr class="text-grey" />
64+
<div class="flex flex-col gap-5">
65+
<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
66+
<div class="{route === '/settings/asdf/data-and-storage' ? 'bg-grey' : ''} rounded-xl p-2">
67+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
68+
{#snippet leadingIcon()}
69+
<HugeiconsIcon
70+
size="24px"
71+
icon={DatabaseIcon}
72+
color="var(--color-brand-burnt-orange)"
73+
/>
74+
{/snippet}
75+
{#snippet children()}
76+
Data & Storage
77+
{/snippet}
78+
</SettingsNavigationButton>
79+
</div>
80+
<div class="{route === '/settings/asdf/support' ? 'bg-grey' : ''} rounded-xl p-2">
81+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/support')}>
82+
{#snippet leadingIcon()}
83+
<HugeiconsIcon
84+
size="24px"
85+
icon={CustomerSupportIcon}
86+
color="var(--color-brand-burnt-orange)"
87+
/>
88+
{/snippet}
89+
{#snippet children()}
90+
Support
91+
{/snippet}
92+
</SettingsNavigationButton>
93+
</div>
94+
</div>
95+
<hr class="text-grey" />
96+
<div class="flex flex-col gap-5">
97+
<div class="{route === '/settings/asdf/logout' ? 'bg-grey' : ''} rounded-xl p-2">
98+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/logout')}>
99+
{#snippet leadingIcon()}
100+
<HugeiconsIcon
101+
size="24px"
102+
icon={Logout01Icon}
103+
color="var(--color-brand-burnt-orange)"
104+
/>
105+
{/snippet}
106+
{#snippet children()}
107+
Logout
108+
{/snippet}
109+
</SettingsNavigationButton>
110+
</div>
111+
</div>
112+
</div>

‎platforms/metagram/src/lib/fragments/SettingsRightAside/Accounts.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script>
2+
import { goto } from '$app/navigation';
3+
import { SettingsNavigationButton } from '..';
4+
</script>
5+
6+
<div class="flex flex-col gap-3">
7+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
8+
{#snippet children()}
9+
Username
10+
{/snippet}
11+
</SettingsNavigationButton>
12+
<hr class="text-grey" />
13+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
14+
{#snippet children()}
15+
Email Address
16+
{/snippet}
17+
</SettingsNavigationButton>
18+
<hr class="text-grey" />
19+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
20+
{#snippet children()}
21+
Change Password
22+
{/snippet}
23+
</SettingsNavigationButton>
24+
<hr class="text-grey" />
25+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
26+
{#snippet children()}
27+
Deactivate Account
28+
{/snippet}
29+
</SettingsNavigationButton>
30+
<hr class="text-grey" />
31+
</div>

‎platforms/metagram/src/lib/fragments/SettingsRightAside/Aside.svelte‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script lang="ts">
2+
import { page } from '$app/state';
3+
import { RightAside } from '..';
4+
import Accounts from './Accounts.svelte';
5+
import DataStorage from './DataStorage.svelte';
6+
import DirectMessages from './DirectMessages.svelte';
7+
import Logout from './Logout.svelte';
8+
import Notifications from './Notifications.svelte';
9+
import Support from './Support.svelte';
10+
11+
let route = $derived(page.url.pathname);
12+
</script>
13+
14+
<RightAside>
15+
{#snippet header()}
16+
{#if route === '/settings/asdf/account'}
17+
Account
18+
{:else if route === '/settings/asdf/notifications'}
19+
Notifications
20+
{:else if route === '/settings/asdf/direct-messages'}
21+
Direct Messages
22+
{:else if route === '/settings/asdf/data-and-storage'}
23+
Data & Storage
24+
{:else if route === '/settings/asdf/support'}
25+
Support
26+
{:else if route === '/settings/asdf/logout'}
27+
Logout
28+
{/if}
29+
{/snippet}
30+
{#snippet asideContent()}
31+
{#if route === '/settings/asdf/account'}
32+
<Accounts></Accounts>
33+
{:else if route === '/settings/asdf/notifications'}
34+
<Notifications></Notifications>
35+
{:else if route === '/settings/asdf/direct-messages'}
36+
<DirectMessages></DirectMessages>
37+
{:else if route === '/settings/asdf/data-and-storage'}
38+
<DataStorage></DataStorage>
39+
{:else if route === '/settings/asdf/support'}
40+
<Support></Support>
41+
{:else if route === '/settings/asdf/logout'}
42+
<Logout></Logout>
43+
{/if}
44+
{/snippet}
45+
</RightAside>

‎platforms/metagram/src/lib/fragments/SettingsRightAside/DataStorage.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script>
2+
import { goto } from '$app/navigation';
3+
import { SettingsNavigationButton } from '..';
4+
</script>
5+
6+
<div class="flex flex-col gap-3">
7+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
8+
{#snippet children()}
9+
Clear cache
10+
{/snippet}
11+
</SettingsNavigationButton>
12+
<hr class="text-grey" />
13+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
14+
{#snippet children()}
15+
Download my data
16+
{/snippet}
17+
</SettingsNavigationButton>
18+
<hr class="text-grey" />
19+
<SettingsNavigationButton onclick={() => goto('/settings/asdf/data-and-storage')}>
20+
{#snippet children()}
21+
Logged in devices
22+
{/snippet}
23+
</SettingsNavigationButton>
24+
<hr class="text-grey" />
25+
</div>

‎platforms/metagram/src/lib/fragments/SettingsRightAside/DirectMessages.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Direct Message Settings

‎platforms/metagram/src/lib/fragments/SettingsRightAside/Logout.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script>
2+
import { goto } from '$app/navigation';
3+
import { Button } from '$lib/ui';
4+
import { SettingsNavigationButton } from '..';
5+
</script>
6+
7+
<div class="flex flex-col gap-3">
8+
<SettingsNavigationButton
9+
hasTrailingIcon={false}
10+
onclick={() => goto('/settings/asdf/data-and-storage')}
11+
>
12+
{#snippet children()}
13+
<div class="flex flex-col items-start">
14+
<h2 class="text-black-800 text-base">Do you want to log out?</h2>
15+
<p class="text-black-600 text-sm">You can log back in anytime</p>
16+
</div>
17+
{/snippet}
18+
</SettingsNavigationButton>
19+
<hr class="text-grey" />
20+
<Button size="sm" variant="secondary" callback={() => alert('logout')}>Logout</Button>
21+
</div>

‎platforms/metagram/src/lib/fragments/SettingsRightAside/Notifications.svelte‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script>
2+
import SettingsToggleButton from '../SettingsToggleButton/SettingsToggleButton.svelte';
3+
</script>
4+
5+
<div class="flex flex-col gap-3">
6+
<SettingsToggleButton checked={false}>
7+
{#snippet children()}
8+
<div class="flex flex-col items-start">
9+
<h2 class="text-black-800 text-base">Push Notifications</h2>
10+
</div>
11+
{/snippet}
12+
</SettingsToggleButton>
13+
<hr class="text-grey" />
14+
<SettingsToggleButton checked={false}>
15+
{#snippet children()}
16+
<div class="flex flex-col items-start">
17+
<h2 class="text-black-800 text-base">Post Interactions</h2>
18+
<p class="text-black-600 text-sm">Likes and comments on your post</p>
19+
</div>
20+
{/snippet}
21+
</SettingsToggleButton>
22+
<hr class="text-grey" />
23+
<SettingsToggleButton checked={false}>
24+
{#snippet children()}
25+
<div class="flex flex-col items-start">
26+
<h2 class="text-black-800 text-base">DM Requests</h2>
27+
</div>
28+
{/snippet}
29+
</SettingsToggleButton>
30+
<hr class="text-grey" />
31+
<SettingsToggleButton checked={false}>
32+
{#snippet children()}
33+
<div class="flex flex-col items-start">
34+
<h2 class="text-black-800 text-base">New Followers</h2>
35+
</div>
36+
{/snippet}
37+
</SettingsToggleButton>
38+
<hr class="text-grey" />
39+
</div>

0 commit comments

Comments
 (0)