12 | {selectedTagsLabel && selectedTags.length > 0 && (
13 |
{selectedTagsLabel}:
14 | )}
15 | {selectedTags.length === 0 ? (
16 |
**no tags specified**
17 | ) : (
18 | selectedTags.map((tag) => (
19 | <>
20 |
43 |
44 | >
45 | ))
46 | )}
47 |
48 | >
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/apps/linkstash-frontend/src/components/Default/ToastNotification/ToastNotification.module.css:
--------------------------------------------------------------------------------
1 | /* ToastNotification.module.css */
2 |
3 | .toast {
4 | @apply bg-white p-2 rounded-md bg-card-background border-[1px] relative
5 | w-24 sm:w-40 lg:w-72 /** width **/
6 | /*before:content-["xs"] sm:before:content-["sm"] md:before:content-["md"] lg:before:content-["lg"] xl:before:content-["xl"] 2xl:before:content-["2xl"]*/
7 | ;
8 | }
9 |
10 | .summary {
11 | @apply text-xs lg:text-sm xl:text-base
12 | font-bold text-gray-800;
13 | }
14 |
15 | .detailsContainer {
16 | @apply overflow-hidden transition-all duration-300 ease-out;
17 | }
18 |
19 | .details {
20 | @apply text-xs lg:text-sm text-gray-600;
21 | }
22 |
23 | .closeBtn {
24 | @apply text-gray-500 hover:text-gray-800 font-bold text-xl leading-none;
25 | background: none;
26 | border: none;
27 | cursor: pointer;
28 | }
29 |
30 | .expandBtn {
31 | @apply mt-2 text-blue-500 hover:text-blue-700 text-xs lg:text-sm;
32 | background: none;
33 | border: none;
34 | cursor: pointer;
35 | }
36 |
37 | /* Progress Bar styles */
38 | .progressBar {
39 | @apply bg-accent;
40 | position: absolute;
41 | bottom: 0;
42 | left: 0;
43 | height: 2px;
44 | width: 100%;
45 | animation-name: countdown;
46 | animation-timing-function: ease-out;
47 | animation-fill-mode: forwards;
48 | border-bottom-left-radius: inherit;
49 | border-bottom-right-radius: inherit;
50 | }
51 |
52 | @keyframes countdown {
53 | from { width: 100%; }
54 | to { width: 0%; }
55 | }
56 |
--------------------------------------------------------------------------------
/apps/linkstash-frontend/src/components/Default/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './ComboBox/ComboBox'
2 | export * from './TagGroup/TagGroup'
3 | export * from './InputComponent/InputComponent'
4 | export * from "./Dialog/LinkstashDialog"
5 | export * from "./TagInput/TagInput"
6 | export * from "./TagInput/TagInputContext"
--------------------------------------------------------------------------------
/apps/linkstash-frontend/src/components/Header/Header.module.css:
--------------------------------------------------------------------------------
1 | .items{
2 | @apply text-center before:content-["\00a0["] after:content-["]\00a0"]
3 | }
--------------------------------------------------------------------------------
/apps/linkstash-frontend/src/components/Loader/Loader.module.css:
--------------------------------------------------------------------------------
1 | .ball-loader{
2 | width: var(--loader-width);
3 | height: calc(var(--loader-width) / 3);
4 | top: 50%;
5 | left: 50%;
6 | /* transform: translateX(-50%) translateY(-50%); */
7 | display: flex;
8 | }
9 |
10 | .ball-loader-ball{
11 | will-change: transform;
12 | height: calc(var(--loader-width) / 11 * 3);
13 | width: calc(var(--loader-width) / 11 * 3);
14 | border-radius: 50%;
15 | background-color: purple;
16 | display: inline-block;
17 | animation: grow var(--loader-animation-duration) ease-in-out infinite alternate;
18 | transform-origin: 50% 50%;
19 |
20 | &.ball1{
21 | margin-right: calc(var(--loader-width)/11);
22 | }
23 |
24 | &.ball2{
25 | margin-right: calc(var(--loader-width)/11);
26 | animation-delay: calc(var(--loader-animation-duration)* 0.33 * -1);
27 | }
28 |
29 | &.ball3{
30 | animation-delay: calc(var(--loader-animation-duration)* 0.66 * -1);
31 | }
32 | }
33 |
34 | @keyframes grow{
35 | 0%{
36 | transform: scale(1);
37 | background-color: purple;
38 | }
39 | 50%{
40 | background-color: #fcf7ff;
41 |
42 |
43 | }
44 | 100%{
45 | transform: scale(.2);
46 | background-color: #256eff;
47 | }
48 | }
--------------------------------------------------------------------------------
/apps/linkstash-frontend/src/components/Loader/Loader.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { ReactNode } from "react";
3 |
4 | import styles from "./Loader.module.css";
5 |
6 | export function Loader({
7 | isLoading,
8 | text="",
9 | children,
10 | }: {
11 | isLoading: boolean;
12 | text?: string;
13 | children: ReactNode;
14 | }): ReactNode {
15 | if (isLoading ) {
16 | return (
17 |