making components with css files in folder

huncholaneauthored 1 year ago

parent 035e4fccommit 43c60ae4769b6ed9748aef59096298cd4b8c232eBrowse files

28 files changed, +143 -41

+2-21twench_landing_page/app/globals.css

		@@ -7,15 +7,8 @@
7	7	--foreground: #171717;
8	8	}
9	9
10		-@media (prefers-color-scheme: dark) {
11		- :root {
12		- --background: #394b37;
13		- --foreground: #ededed;
14		- }
15		-}
16		-
17	10	body {
18		- color: var(--foreground);
	11	+ color: white;
19	12	background: var(--background);
20	13	font-family: Pixellari, Arial, Helvetica, sans-serif;
21	14	text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
		@@ -34,19 +27,7 @@ body {
34	27	-2px 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
35	28	}
36	29
37		-.large-text-shadow {
	30	+.text-shadow {
38	31	text-shadow: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000,
39	32	-4px 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000;
40	33	}
41		-
42		-.landing {
43		- height: 100vh;
44		- width: 100vw;
45		- background: url("/images/burning-building-1.png") no-repeat center center;
46		- background-size: cover;
47		- overflow-x: hidden;
48		-}
49		-
50		-.text-shadow {
51		- text-shadow: 2px 2px 0 rgba(0, 0, 0, 1);
52		-}

+3-17twench_landing_page/app/page.tsx

		@@ -1,26 +1,12 @@
1	1	import Header from "@/components/Header";
	2	+import LandingSection from "@/components/LandingSection";
2	3	import Image from "next/image";
3	4
4	5	export default function Home() {
5	6	return (
6	7	<div>
7		- <div className="landing relative">
8		- <Header />
9		- <h1 className="text-[180px] large-text-shadow w-full text-center bottom-[480px] absolute"></h1>
10		- <div className="absolute bottom-[-20px] flex justify-center max-h-[75%] w-full">
11		- <Image src="/images/tank.png" width={1354} height={656} alt="Tank" />
12		- </div>
13		- <div className="absolute bottom-[-20px] z-10 flex justify-center max-h-[50%] w-full">
14		- <Image
15		- src="/images/soldier-large.png"
16		- width={472}
17		- height={472}
18		- alt="Soldier"
19		- />
20		- </div>
21		- </div>
22		- <div></div>
23		- <div></div>
	8	+ <Header />
	9	+ <LandingSection />
24	10	</div>
25	11	);
26	12	}

+2-0twench_landing_page/components/AboutSection/AboutSection.css

		@@ -0,0 +1,2 @@
	1	+.AboutSection {
	2	+}

+12-0twench_landing_page/components/AboutSection/AboutSection.tsx

		@@ -0,0 +1,12 @@
	1	+import React from 'react';
	2	+import './AboutSection.css';
	3	+
	4	+const AboutSection: React.FC = () => {
	5	+ return (
	6	+ <div className="AboutSection">
	7	+ AboutSection
	8	+ </div>
	9	+ );
	10	+};
	11	+
	12	+export default AboutSection;

+2-0twench_landing_page/components/AboutSection/index.ts

		@@ -0,0 +1,2 @@
	1	+import AboutSection from "./AboutSection";
	2	+export default AboutSection;

+2-0twench_landing_page/components/BuySection/BuySection.css

		@@ -0,0 +1,2 @@
	1	+.BuySection {
	2	+}

+12-0twench_landing_page/components/BuySection/BuySection.tsx

		@@ -0,0 +1,12 @@
	1	+import React from 'react';
	2	+import './BuySection.css';
	3	+
	4	+const BuySection: React.FC = () => {
	5	+ return (
	6	+ <div className="BuySection">
	7	+ BuySection
	8	+ </div>
	9	+ );
	10	+};
	11	+
	12	+export default BuySection;

+2-0twench_landing_page/components/BuySection/index.ts

		@@ -0,0 +1,2 @@
	1	+import BuySection from './BuySection';
	2	+export default BuySection;

+2-0twench_landing_page/components/FinalArtSection/FinalArtSection.css

		@@ -0,0 +1,2 @@
	1	+.FinalArtSection {
	2	+}

+12-0twench_landing_page/components/FinalArtSection/FinalArtSection.tsx

		@@ -0,0 +1,12 @@
	1	+import React from 'react';
	2	+import './FinalArtSection.css';
	3	+
	4	+const FinalArtSection: React.FC = () => {
	5	+ return (
	6	+ <div className="FinalArtSection">
	7	+ FinalArtSection
	8	+ </div>
	9	+ );
	10	+};
	11	+
	12	+export default FinalArtSection;

+2-0twench_landing_page/components/FinalArtSection/index.ts

		@@ -0,0 +1,2 @@
	1	+import FinalArtSection from './FinalArtSection';
	2	+export default FinalArtSection;

+0-0twench_landing_page/components/sections/AboutSection.tsx → twench_landing_page/components/Header/Header.css

No content changes (mode or rename only).

+2-2twench_landing_page/components/Header.tsx → twench_landing_page/components/Header/Header.tsx

		@@ -1,5 +1,5 @@
	1	+import "./Header.css";
1	2	import Image from "next/image";
2		-import React from "react";
3	3
4	4	const Header = () => {
5	5	return (
		@@ -41,7 +41,7 @@ const Header = () => {
41	41	</a>
42	42	</div>
43	43	<a
44		- className="p-1 sm:p-3 border-black bg-background my-auto rounded-full border-4 text-[12px] leading-[30.52px] cursor-pointer hover:brightness-150 sm:text-[28px] mr-3 sm:mr-0 small-text-shadow sm:large-text-shadow text-white"
	44	+ className="p-1 sm:p-3 border-black bg-background my-auto rounded-full border-4 text-[12px] leading-[30.52px] cursor-pointer hover:brightness-150 sm:text-[28px] mr-3 sm:mr-0 small-text-shadow sm:text-shadow text-white"
45	45	href=""
46	46	>
47	47	BUY $TWENCH

+3-0twench_landing_page/components/Header/index.ts

		@@ -0,0 +1,3 @@
	1	+import Header from "./Header";
	2	+
	3	+export default Header;

+7-0twench_landing_page/components/LandingSection/LandingSection.css

		@@ -0,0 +1,7 @@
	1	+.LandingSection {
	2	+ height: 100vh;
	3	+ width: 100vw;
	4	+ background: url("/images/burning-building-1.png") no-repeat center center;
	5	+ background-size: cover;
	6	+ overflow-x: hidden;
	7	+}

+2-1twench_landing_page/components/sections/LandingSection.tsx → twench_landing_page/components/LandingSection/LandingSection.tsx

		@@ -1,9 +1,10 @@
1	1	import Image from "next/image";
2	2	import React from "react";
	3	+import "./LandingSection.css";
3	4
4	5	const LandingSection = () => {
5	6	return (
6		- <div className="landing">
	7	+ <div className="LandingSection">
7	8	<div className="flex h-32 w-20">
8	9	<Image src="/images/logo.png" alt="Twench" width={68} height={68} />
9	10	<div className="flex gap-4">

+2-0twench_landing_page/components/LandingSection/index.ts

		@@ -0,0 +1,2 @@
	1	+import LandingSection from "./LandingSection";
	2	+export default LandingSection;

+2-0twench_landing_page/components/MotivationSection/MotivationSection.css

		@@ -0,0 +1,2 @@
	1	+.MotivationSection {
	2	+}

+12-0twench_landing_page/components/MotivationSection/MotivationSection.tsx

		@@ -0,0 +1,12 @@
	1	+import React from 'react';
	2	+import './MotivationSection.css';
	3	+
	4	+const MotivationSection: React.FC = () => {
	5	+ return (
	6	+ <div className="MotivationSection">
	7	+ MotivationSection
	8	+ </div>
	9	+ );
	10	+};
	11	+
	12	+export default MotivationSection;

+2-0twench_landing_page/components/MotivationSection/index.ts

		@@ -0,0 +1,2 @@
	1	+import MotivationSection from './MotivationSection';
	2	+export default MotivationSection;

+2-0twench_landing_page/components/RoadMapSection/RoadMapSection.css

		@@ -0,0 +1,2 @@
	1	+.RoadMapSection {
	2	+}

+12-0twench_landing_page/components/RoadMapSection/RoadMapSection.tsx

		@@ -0,0 +1,12 @@
	1	+import React from 'react';
	2	+import './RoadMapSection.css';
	3	+
	4	+const RoadMapSection: React.FC = () => {
	5	+ return (
	6	+ <div className="RoadMapSection">
	7	+ RoadMapSection
	8	+ </div>
	9	+ );
	10	+};
	11	+
	12	+export default RoadMapSection;

+2-0twench_landing_page/components/RoadMapSection/index.ts

		@@ -0,0 +1,2 @@
	1	+import RoadMapSection from './RoadMapSection';
	2	+export default RoadMapSection;

+0-0twench_landing_page/components/sections/BuySection.tsx

No content changes (mode or rename only).

+0-0twench_landing_page/components/sections/FinalArtSection.tsx

No content changes (mode or rename only).

+0-0twench_landing_page/components/sections/MotivationSection.tsx

No content changes (mode or rename only).

+0-0twench_landing_page/components/sections/RoadMapSections.tsx

No content changes (mode or rename only).

+42-0twench_landing_page/source.sh

		@@ -0,0 +1,42 @@
	1	+unset -f mc
	2	+unalias mc 2>/dev/null
	3	+mc() {
	4	+ local compname=$1
	5	+ if [[ ! -d "components" ]]; then
	6	+ echo -e "\033[0;32mCreating components directory\033[0m"
	7	+ mkdir components
	8	+ fi
	9	+ local compdir="components/$compname"
	10	+ if [[ ! -d "$compdir" ]]; then
	11	+ echo -e "\033[0;32mCreating $compdir directory\033[0m"
	12	+ mkdir $compdir
	13	+ fi
	14	+ local compindex="components/$compname/index.ts"
	15	+ if [[ ! -e "$compindex" ]]; then
	16	+ echo -e "\033[0;32mCreating $compindex\033[0m"
	17	+ echo "import $compname from './$compname';" > $compindex
	18	+ echo "export default $compname;" >> $compdir/index.ts
	19	+ fi
	20	+ local compstyle="components/$compname/$compname.css"
	21	+ if [[ ! -e "$compstyle" ]]; then
	22	+ echo -e "\033[0;32mCreating $compstyle\033[0m"
	23	+ echo ".$compname {" > $compstyle
	24	+ echo "}" >> $compstyle
	25	+ fi
	26	+ local compfile="components/$compname/$compname.tsx"
	27	+ if [[ ! -e "$compfile" ]]; then
	28	+ echo -e "\033[0;32mCreating $compfile\033[0m"
	29	+ echo "import React from 'react';" > $compfile
	30	+ echo "import './$compname.css';" >> $compfile
	31	+ echo "" >> $compfile
	32	+ echo "const $compname: React.FC = () => {" >> $compfile
	33	+ echo " return (" >> $compfile
	34	+ echo " <div className=\"$compname\">" >> $compfile
	35	+ echo " $compname" >> $compfile
	36	+ echo " </div>" >> $compfile
	37	+ echo " );" >> $compfile
	38	+ echo "};" >> $compfile
	39	+ echo "" >> $compfile
	40	+ echo "export default $compname;" >> $compfile
	41	+ fi
	42	+}