fix: naming

src/components/GlossarySearch/GlossaryTerm.css → src/components/GlossarySearch/GlossaryCard.css

@@ -1,7 +1,5 @@
 /* GLOSSARY TERM CARD */
 
-/* Wrapper  */
-
 .glossary-term__card {
 	display: flex;
 	flex-direction: column;
@@ -69,59 +67,6 @@
 	animation: slideRight 0.5s ease-in-out;
 }
 
-.glossary-term__page {
-	display: grid;
-	grid-template-columns: 3fr 1fr;
-}
-
-.glossary-term__article {	
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
-	padding: 4rem 1.5rem;
-}
-
-.glossary-term__content {	
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
-	padding: 0 4rem 4rem 0;
-}
-
-.glossary-term__aside {	
-	display: flex;
-	flex-direction: column;
-	padding: 1.5rem;
-	background-color: var(--nu10);
-	border: 1px solid var(--border-light);
-	border-radius: 8px;
-	height: fit-content;
-}
-
-.glossary-term__header {	
-	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-}
-
-
-@media (max-width: 1080px) {
-	.glossary-term__page {
-		grid-template-columns: 1fr;
-	}
-	.glossary-term__content {	
-		padding:  1.5rem;
-	}
-	.glossary-term__aside {
-		order: -1;
-		margin: 0;
-	}
-	.glossary-term__content,
-	.glossary-term__aside {
-		margin-top: 1.5rem;
-	}
-}
-
 @keyframes slideRight {
   50% {
     transform: translateX(5px);

src/components/GlossarySearch/GlossaryTerm.tsx → src/components/GlossarySearch/GlossaryCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { GlossaryTermType } from "./GlossarySearch";
-import "./GlossaryTerm.css";
+import { GlossaryTermType } from "./index";
+import "./GlossaryCard.css";
 import ArrowIcon from "../icons/ArrowIcon";
 import BookIcon from "../icons/BookIcon";
 

src/components/GlossarySearch/GlossarySearch.tsx → src/components/GlossarySearch/index.tsx

@@ -3,7 +3,7 @@ import terms from "./glossaryTerms.json";
 import "./GlossarySearch.css";
 import SearchIcon from "../icons/SearchIcon";
 import useSearch from "../utils/UseSearch";
-import GlossaryTerm from "./GlossaryTerm";
+import GlossaryTerm from "./GlossaryCard";
 import Kbd from "../Kbd";
 
 type GlossaryPageSection = {

src/components/GlossaryTermPage/GlossaryTermPage.css

@@ -0,0 +1,54 @@
+/* GLOSSARY TERM PAGE */
+
+.glossary-term__page {
+	display: grid;
+	grid-template-columns: 3fr 1fr;
+}
+
+.glossary-term__article {	
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+	padding: 4rem 1.5rem;
+}
+
+.glossary-term__content {	
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+	padding: 0 4rem 4rem 0;
+}
+
+.glossary-term__aside {	
+	display: flex;
+	flex-direction: column;
+	padding: 1.5rem;
+	background-color: var(--nu10);
+	border: 1px solid var(--border-light);
+	border-radius: 8px;
+	height: fit-content;
+}
+
+.glossary-term__header {	
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+}
+
+
+@media (max-width: 1080px) {
+	.glossary-term__page {
+		grid-template-columns: 1fr;
+	}
+	.glossary-term__content {	
+		padding:  1.5rem;
+	}
+	.glossary-term__aside {
+		order: -1;
+		margin: 0;
+	}
+	.glossary-term__content,
+	.glossary-term__aside {
+		margin-top: 1.5rem;
+	}
+}

src/components/GlossaryTerm/GlossaryTermPageAside.tsx → src/components/GlossaryTermPage/GlossaryTermPageAside.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GlossaryTermType } from "../GlossarySearch/GlossarySearch";
+import { GlossaryTermType } from "../GlossarySearch";
 import BookIcon from "../icons/BookIcon";
 
 const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => {

src/components/GlossaryTerm/GlossaryTermPageContent.tsx → src/components/GlossaryTermPage/GlossaryTermPageContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GlossaryTermType } from "../GlossarySearch/GlossarySearch";
+import { GlossaryTermType } from "../GlossarySearch";
 
 const GlossaryTermPageContent = ({ term }: { term: GlossaryTermType }) => (
   <div className="glossary-term__content">

src/components/GlossaryTerm/GlossaryTermPage.tsx → src/components/GlossaryTermPage/index.tsx

@@ -1,5 +1,7 @@
 import React, { ReactElement } from "react";
 
+import "./GlossaryTermPage.css";
+
 const GlossaryTermPage = ({
   children,
 }: {

src/pages/glossary.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PageLayout from "../components/PageLayout";
-import GlossarySearch from "../components/GlossarySearch/GlossarySearch";
+import GlossarySearch from "../components/GlossarySearch";
 
 const Finops = () => {
   return (

src/pages/glossary/finops.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import PageLayout from "../../components/PageLayout";
-import GlossaryTermPageIntro from "../../components/GlossaryTerm/GlossaryTermPageIntro";
-import GlossaryTermPage from "../../components/GlossaryTerm/GlossaryTermPage";
+import GlossaryTermPageIntro from "../../components/GlossaryTermPage/GlossaryTermPageIntro";
+import GlossaryTermPage from "../../components/GlossaryTermPage";
 import terms from "../../components/GlossarySearch/glossaryTerms.json";
-import GlossaryTermPageAside from "../../components/GlossaryTerm/GlossaryTermPageAside";
-import GlossaryTermPageContent from "../../components/GlossaryTerm/GlossaryTermPageContent";
+import GlossaryTermPageAside from "../../components/GlossaryTermPage/GlossaryTermPageAside";
+import GlossaryTermPageContent from "../../components/GlossaryTermPage/GlossaryTermPageContent";
 
 const Finops = () => {
   const finops = terms.filter((term) => term.key === "FinOps")[0];