Skip to content

Commit d37f573

Browse files
youzarsiphyouzarsiph
committed
Add Switch component and update thee UI
1 parent f2c7bfc commit d37f573

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+7147
-2979
lines changed

‎.github/workflows/codeql.yml

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
# the `language` matrix defined below to confirm you have the correct set of
1010
# supported CodeQL languages.
1111
#
12-
name: "CodeQL"
12+
name: 'CodeQL'
1313

1414
on:
1515
push:
16-
branches: ["main", "release"]
16+
branches: ['main', 'release']
1717
pull_request:
18-
branches: ["main", "release"]
18+
branches: ['main', 'release']
1919
schedule:
20-
- cron: "23 19 * * 0"
20+
- cron: '23 19 * * 0'
2121

2222
jobs:
2323
analyze:
@@ -86,4 +86,4 @@ jobs:
8686
- name: Perform CodeQL Analysis
8787
uses: github/codeql-action/analyze@v3
8888
with:
89-
category: "/language:${{matrix.language}}"
89+
category: '/language:${{matrix.language}}'

‎.github/workflows/eslint.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ name: ESLint
1111

1212
on:
1313
push:
14-
branches: ["main", "release"]
14+
branches: ['main', 'release']
1515
pull_request:
1616
# The branches below must be a subset of the branches above
17-
branches: ["main", "release"]
17+
branches: ['main', 'release']
1818

1919
jobs:
2020
eslint:

‎.github/workflows/main.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: "publish"
1+
name: 'publish'
22

33
on:
44
push:
@@ -43,7 +43,7 @@ jobs:
4343
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
4444
with:
4545
tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
46-
releaseName: "App v__VERSION__"
47-
releaseBody: "See the assets to download this version and install."
46+
releaseName: 'App v__VERSION__'
47+
releaseBody: 'See the assets to download this version and install.'
4848
releaseDraft: true
4949
prerelease: false

‎.github/workflows/prettier.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ name: Prettier
1212

1313
on:
1414
push:
15-
branches: ["main", "release"]
15+
branches: ['main', 'release']
1616
pull_request:
1717
# The branches below must be a subset of the branches above
18-
branches: ["main", "release"]
18+
branches: ['main', 'release']
1919

2020
jobs:
2121
eslint:

‎.github/workflows/rust-clippy.yml

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ name: rust-clippy analyze
1111

1212
on:
1313
push:
14-
branches: [ "release" ]
14+
branches: ['release']
1515
pull_request:
1616
# The branches below must be a subset of the branches above
17-
branches: [ "release" ]
17+
branches: ['release']
1818
schedule:
1919
- cron: '43 22 * * 2'
2020

@@ -42,8 +42,7 @@ jobs:
4242
run: cargo install clippy-sarif sarif-fmt
4343

4444
- name: Run rust-clippy
45-
run:
46-
cargo clippy
45+
run: cargo clippy
4746
--all-features
4847
--message-format=json | clippy-sarif | tee rust-clippy-results.sarif | sarif-fmt
4948
continue-on-error: true

‎.github/workflows/rust.yml

+7-8
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,20 @@ name: Rust
22

33
on:
44
push:
5-
branches: [ "release" ]
5+
branches: ['release']
66
pull_request:
7-
branches: [ "release" ]
7+
branches: ['release']
88

99
env:
1010
CARGO_TERM_COLOR: always
1111

1212
jobs:
1313
build:
14-
1514
runs-on: ubuntu-latest
1615

1716
steps:
18-
- uses: actions/checkout@v4
19-
- name: Build
20-
run: cargo build --verbose
21-
- name: Run tests
22-
run: cargo test --verbose
17+
- uses: actions/checkout@v4
18+
- name: Build
19+
run: cargo build --verbose
20+
- name: Run tests
21+
run: cargo test --verbose

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"semi": false,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"trailingComma": "all",
6+
"singleQuote": true,
7+
"endOfLine": "auto",
8+
"plugins": ["prettier-plugin-tailwindcss"]
9+
}

‎app/layout.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { Noto_Sans } from "next/font/google";
2-
import "@/app/globals.css";
1+
import { Noto_Sans } from 'next/font/google'
2+
import '@/app/globals.css'
33

4-
const noto = Noto_Sans({ subsets: ["latin"] });
4+
const noto = Noto_Sans({ subsets: ['latin'] })
55

66
export const metadata = {
7-
metadataBase: new URL("https://snippets-gamma.vercel.app"),
8-
title: "Snippets",
9-
description: " Create beautiful images of your code snippets",
7+
metadataBase: new URL('https://snippets-gamma.vercel.app'),
8+
title: 'Snippets',
9+
description: ' Create beautiful images of your code snippets',
1010
openGraph: {
11-
images: "/og-image.png",
11+
images: '/og-image.png',
1212
},
13-
};
13+
}
1414

1515
export default function RootLayout({
1616
children,
1717
}: {
18-
children: React.ReactNode;
18+
children: React.ReactNode
1919
}) {
2020
return (
2121
<html lang="en">
2222
<body className={noto.className}>{children}</body>
2323
</html>
24-
);
24+
)
2525
}

‎app/page.tsx

+67-67
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
"use client";
1+
'use client'
22

3-
import clsx from "clsx";
4-
import React from "react";
5-
import hljs from "highlight.js";
6-
import { Fonts } from "@/app/styles";
7-
import { Account, Background, Nav, Snippet } from "@/app/ui";
8-
import { Constants, exportImage } from "@/app/utils";
9-
import { CodeSettings, ContainerSettings, ExportSettings } from "@/app/types";
3+
import clsx from 'clsx'
4+
import React from 'react'
5+
import hljs from 'highlight.js'
6+
import { Fonts } from '@/app/styles'
7+
import { Account, Background, Nav, Snippet } from '@/app/ui'
8+
import { Constants, exportImage } from '@/app/utils'
9+
import { CodeSettings, ContainerSettings, ExportSettings } from '@/app/types'
1010

1111
const Home = () => {
1212
// Target element
13-
const target = React.useRef(null);
13+
const target = React.useRef(null)
1414

1515
// Container Settings
1616
const [container, setContainer] = React.useState<ContainerSettings>({
1717
theme: true,
18-
size: "auto",
19-
type: "linear",
20-
padding: "64px",
18+
size: 'auto',
19+
type: 'linear',
20+
padding: '64px',
2121
isGradient: true,
22-
direction: "top-right",
22+
direction: 'top-right',
2323
color: Constants.colors[0],
2424
buttons: { style: true, position: true },
25-
});
25+
})
2626

2727
// Export settings
2828
const [exportSettings, setExport] = React.useState<ExportSettings>({
2929
quality: 1,
30-
format: "png",
31-
});
30+
format: 'png',
31+
})
3232

3333
// Code Settings
3434
const [code, setCode] = React.useState<CodeSettings>({
35-
font: "JetBrains Mono",
36-
highlight: "github-dark",
35+
font: 'JetBrains Mono',
36+
highlight: 'github-dark',
3737
displayLineNumbers: true,
3838
tab: {
39-
name: "Untitled",
40-
content: "Type your code here.",
41-
language: "plaintext",
39+
name: 'Untitled',
40+
content: 'Type your code here.',
41+
language: 'plaintext',
4242
},
43-
});
43+
})
4444

4545
// Author
4646
const [author, setAuthor] = React.useState({
4747
isVisible: false,
48-
name: "Your Name",
49-
username: "github.com/username",
50-
});
48+
name: 'Your Name',
49+
username: 'github.com/username',
50+
})
5151

5252
React.useEffect(
5353
() =>
@@ -59,18 +59,18 @@ const Home = () => {
5959
}),
6060
// eslint-disable-next-line react-hooks/exhaustive-deps
6161
[],
62-
);
62+
)
6363

6464
React.useEffect(() => {
6565
// Remove attribute to re-highlight code
66-
document.getElementById("code")?.removeAttribute("data-highlighted");
66+
document.getElementById('code')?.removeAttribute('data-highlighted')
6767

6868
// Highlight code
69-
hljs.highlightAll();
70-
}, [code]);
69+
hljs.highlightAll()
70+
}, [code])
7171

7272
return (
73-
<div className={clsx({ dark: container.theme }, "block h-screen w-screen")}>
73+
<div className={clsx({ dark: container.theme }, 'block h-screen w-screen')}>
7474
<link
7575
rel="stylesheet"
7676
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.min.css"
@@ -107,56 +107,56 @@ const Home = () => {
107107
<div className={`relative h-fit w-fit`}>
108108
<div
109109
ref={target}
110-
className={clsx("p-1", Fonts[code.font].className)}
110+
className={clsx('p-1', Fonts[code.font].className)}
111111
>
112112
<section
113113
style={Constants.sizes[container.size]}
114114
className={clsx(
115-
"relative flex h-full w-full flex-col items-center justify-center overflow-auto rounded-lg shadow-xl",
115+
'relative flex h-full w-full flex-col items-center justify-center overflow-auto rounded-lg shadow-xl',
116116
container.color,
117117
{
118-
"p-4": container.padding === "16px",
119-
"p-8": container.padding === "32px",
120-
"p-16": container.padding === "64px",
121-
"p-32": container.padding === "128px",
118+
'p-4': container.padding === '16px',
119+
'p-8': container.padding === '32px',
120+
'p-16': container.padding === '64px',
121+
'p-32': container.padding === '128px',
122122
},
123123
{
124-
"bg-gradient-to-t":
124+
'bg-gradient-to-t':
125125
container.isGradient &&
126-
container.type === "linear" &&
127-
container.direction === "top",
128-
"bg-gradient-to-tr":
126+
container.type === 'linear' &&
127+
container.direction === 'top',
128+
'bg-gradient-to-tr':
129129
container.isGradient &&
130-
container.type === "linear" &&
131-
container.direction === "top-right",
132-
"bg-gradient-to-r":
130+
container.type === 'linear' &&
131+
container.direction === 'top-right',
132+
'bg-gradient-to-r':
133133
container.isGradient &&
134-
container.type === "linear" &&
135-
container.direction === "right",
136-
"bg-gradient-to-br":
134+
container.type === 'linear' &&
135+
container.direction === 'right',
136+
'bg-gradient-to-br':
137137
container.isGradient &&
138-
container.type === "linear" &&
139-
container.direction === "bottom-right",
140-
"bg-gradient-to-b":
138+
container.type === 'linear' &&
139+
container.direction === 'bottom-right',
140+
'bg-gradient-to-b':
141141
container.isGradient &&
142-
container.type === "linear" &&
143-
container.direction === "bottom",
144-
"bg-gradient-to-bl":
142+
container.type === 'linear' &&
143+
container.direction === 'bottom',
144+
'bg-gradient-to-bl':
145145
container.isGradient &&
146-
container.type === "linear" &&
147-
container.direction === "bottom-left",
148-
"bg-gradient-to-l":
146+
container.type === 'linear' &&
147+
container.direction === 'bottom-left',
148+
'bg-gradient-to-l':
149149
container.isGradient &&
150-
container.type === "linear" &&
151-
container.direction === "left",
152-
"bg-gradient-to-tl":
150+
container.type === 'linear' &&
151+
container.direction === 'left',
152+
'bg-gradient-to-tl':
153153
container.isGradient &&
154-
container.type === "linear" &&
155-
container.direction === "top-left",
156-
"bg-gradient-conic":
157-
container.isGradient && container.type === "conic",
158-
"bg-gradient-radial":
159-
container.isGradient && container.type === "radial",
154+
container.type === 'linear' &&
155+
container.direction === 'top-left',
156+
'bg-gradient-conic':
157+
container.isGradient && container.type === 'conic',
158+
'bg-gradient-radial':
159+
container.isGradient && container.type === 'radial',
160160
},
161161
)}
162162
>
@@ -184,7 +184,7 @@ const Home = () => {
184184
</main>
185185
</div>
186186
</div>
187-
);
188-
};
187+
)
188+
}
189189

190-
export default Home;
190+
export default Home

0 commit comments

Comments
 (0)